mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-27 23:30:04 +02:00
Add dark mode support (#35857)
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
This commit is contained in:
Mark Otto
GitHub
273
site/content/docs/5.2/customize/color-modes.md
Normal file
273
site/content/docs/5.2/customize/color-modes.md
Normal file
@@ -0,0 +1,273 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Color modes
|
||||
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
|
||||
group: customize
|
||||
toc: true
|
||||
added: "5.3"
|
||||
---
|
||||
|
||||
## Dark mode
|
||||
|
||||
**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
|
||||
|
||||
Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#sass-usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
|
||||
|
||||
## Example
|
||||
|
||||
For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
|
||||
|
||||
{{< example class="d-flex justify-content-between" >}}
|
||||
<div class="dropdown" data-bs-theme="light">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
|
||||
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" data-bs-theme="dark">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dark dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
|
||||
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## How it works
|
||||
|
||||
- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `<html>` element, or to any other element or Bootstrap component. If applied to the `<html>` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
|
||||
|
||||
- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
|
||||
|
||||
```scss
|
||||
// Color mode variables in _root.scss
|
||||
@include color-mode(dark) {
|
||||
// CSS variable overrides here...
|
||||
}
|
||||
```
|
||||
|
||||
- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
|
||||
|
||||
## Nesting color modes
|
||||
|
||||
Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
|
||||
|
||||
For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
|
||||
|
||||
{{< example class="p-0" >}}
|
||||
<div data-bs-theme="dark" class="p-3 text-body bg-body">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dark</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
|
||||
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown mb-4">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dark dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
|
||||
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-bs-theme="light" class="p-3 text-body bg-body rounded">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Dark</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Light</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<p>This should be shown in a <strong>light</strong> theme at all times.</p>
|
||||
|
||||
<div class="progress mb-4">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Light dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
|
||||
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Usage
|
||||
|
||||
### Enable dark mode
|
||||
|
||||
Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `<html>` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap demo</title>
|
||||
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
|
||||
</head>
|
||||
<body data-bs-theme="dark">
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
|
||||
|
||||
### Building with Sass
|
||||
|
||||
Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `@enable-dark-mode` to `false`.
|
||||
|
||||
We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
|
||||
|
||||
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
|
||||
|
||||
```scss
|
||||
@color-mode-type: data !default;
|
||||
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Outputs to:
|
||||
|
||||
```css
|
||||
[data-bs-theme=dark] .element {
|
||||
color: var(--bs-primary-text);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
```
|
||||
|
||||
And when setting to `media-query`:
|
||||
|
||||
```scss
|
||||
@color-mode-type: media-query;
|
||||
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Outputs to:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Custom color modes
|
||||
|
||||
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
|
||||
|
||||
For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
|
||||
|
||||
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
|
||||
|
||||
<div class="bd-example text-body bg-body" data-bs-theme="blue">
|
||||
<div class="h4">Example blue theme</div>
|
||||
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
|
||||
<li><a class="dropdown-item active" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div data-bs-theme="blue">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## JavaScript
|
||||
|
||||
To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
|
||||
|
||||
Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
|
||||
|
||||
{{< example lang="js" show_preview="false" >}}
|
||||
{{< js.inline >}}
|
||||
{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}}
|
||||
{{< /js.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
## CSS
|
||||
|
||||
### Variables
|
||||
|
||||
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#sass-usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
|
||||
|
||||
{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
|
||||
|
||||
{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
|
||||
|
||||
### Sass mixin
|
||||
|
||||
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#sass-usage) for more details.
|
||||
|
||||
{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
|
||||
@@ -6,7 +6,365 @@ group: customize
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Theme colors
|
||||
## Colors
|
||||
|
||||
{{< added-in "5.3.0" >}}
|
||||
|
||||
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
|
||||
|
||||
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
|
||||
|
||||
{{< callout warning>}}
|
||||
**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
|
||||
{{< /callout >}}
|
||||
|
||||
<table class="table table-swatches">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 340px;">Description</th>
|
||||
<th style="width: 200px;" class="ps-0">Swatch</th>
|
||||
<th>Variables</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
{{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
{{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
{{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-primary">Primary</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-primary-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-success">Success</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-success-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-danger">Danger</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-danger-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-warning">Warning</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-warning-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-info">Info</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-info-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-light border">Light</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-light-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
{{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
|
||||
</td>
|
||||
<td class="ps-0">
|
||||
<div class="p-3 rounded-2 text-bg-dark border">Dark</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div>
|
||||
</td>
|
||||
<td>
|
||||
{{< markdown >}}`--bs-dark-text`{{< /markdown >}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Using the new colors
|
||||
|
||||
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
|
||||
|
||||
{{< example >}}
|
||||
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
|
||||
Example element with utilities
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Theme colors
|
||||
|
||||
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
|
||||
|
||||
@@ -14,7 +372,7 @@ We use a subset of all colors to create a smaller color palette for generating c
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
|
||||
<div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{< /theme-colors.inline >}}
|
||||
@@ -26,7 +384,7 @@ All these colors are available as a Sass map, `$theme-colors`.
|
||||
|
||||
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
|
||||
|
||||
## All colors
|
||||
### All colors
|
||||
|
||||
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
|
||||
|
||||
|
||||
@@ -14,6 +14,10 @@ Bootstrap includes many [CSS custom properties (variables)](https://developer.mo
|
||||
|
||||
Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
|
||||
|
||||
### Default
|
||||
|
||||
These CSS variables are available everywhere, regardless of color mode.
|
||||
|
||||
```css
|
||||
{{< root.inline >}}
|
||||
{{- $css := readFile "dist/css/bootstrap.css" -}}
|
||||
|
||||
@@ -13,6 +13,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
||||
| Variable | Values | Description |
|
||||
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
|
||||
| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
|
||||
@@ -57,8 +57,9 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
|
||||
|
||||
// 2. Include any default variable overrides here
|
||||
|
||||
// 3. Include remainder of required Bootstrap stylesheets
|
||||
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
// 4. Include any default map overrides here
|
||||
|
||||
@@ -104,6 +105,7 @@ $body-color: #111;
|
||||
|
||||
// Required
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
@import "../node_modules/bootstrap/scss/maps";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
@@ -166,6 +168,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw
|
||||
// Required
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
|
||||
|
||||
@@ -294,7 +297,7 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
|
||||
|
||||
### Color schemes
|
||||
|
||||
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
|
||||
A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
|
||||
|
||||
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user