From a3f8480d5b5bb4fbb6be9f2f87b808648b4f0be4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 Mar 2023 21:53:31 -0800 Subject: [PATCH] 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 --- .../content/docs/5.3/customize/color-modes.md | 67 ------------------- 1 file changed, 67 deletions(-) diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 3aedfd2588a7..b59872de5a46 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