From: Mark Otto Date: Wed, 8 Mar 2023 05:53:31 +0000 (-0800) Subject: Remove nesting color modes docs section (#38192) X-Git-Tag: v5.3.0-alpha2~55 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a3f8480d5b5bb4fbb6be9f2f87b808648b4f0be4;p=thirdparty%2Fbootstrap.git Remove nesting color modes docs section (#38192) * Update docs for nesting color modes to better communicate issues with nesting light in dark * Remove nesting entirely actually, it's impossible to properly show an example when in dark mode --- diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 3aedfd2588..b59872de5a 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -62,73 +62,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li - 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 `

`, the `

` has no `background-color` as it's set on the ``. 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" >}} -

- - -

This should be shown in a dark theme at all times.

- -

- - - -

- - -

This should be shown in a light theme at all times.

- -

- - -

-{{< /example >}} - ## Usage ### Enable dark mode