diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-11-12 01:09:06 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-12 01:09:06 +0300 |
| commit | 65f7c455f51784677ee4a4ca3b9caced51c181d9 (patch) | |
| tree | 400288e4745163bdba38ecbdc7c040a8e49ef301 | |
| parent | 97148476474f23452a659f70e878e5e797a81dcb (diff) | |
Update some copy
| -rw-r--r-- | site/content/docs/5.2/customize/color-modes.md | 19 |
1 files changed, 10 insertions, 9 deletions
diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md index 5aafefc3ef..c9d74e5590 100644 --- a/site/content/docs/5.2/customize/color-modes.md +++ b/site/content/docs/5.2/customize/color-modes.md @@ -1,15 +1,14 @@ --- layout: docs title: Color modes -description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light theme and new dark mode theme, or create your own using our themes as your template. +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 prev: color next: components +added: "5.3" --- -{{< added-in "5.3.0" >}} - ## 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. @@ -56,10 +55,12 @@ We've implemented... ## 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 without modification, but the nested `data-bs-theme="light"` needs help to reset some global styles. This is because `data-bs-theme` doesn't reset the globally declared `<body>` colors, so we have to add `.bg-body` and `.text-body`. +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="" >}} -<div data-bs-theme="dark"> +{{< 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> @@ -87,7 +88,7 @@ Use `data-bs-theme` on a nested element to change the color mode for a group of </ul> </div> - <div data-bs-theme="light" class="p-3 bg-body text-body rounded"> + <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> @@ -121,9 +122,9 @@ Use `data-bs-theme` on a nested element to change the color mode for a group of ## Usage -Our new dark mode option is enabled by default for all users of Bootstrap. You can disable our dark mode via Sass by changing `@enable-dark-mode` to `false`. +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`. -In addition, 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 way to add different themes and more custom color modes beyond light and dark. +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. |