diff --git a/site/content/docs/5.3/customize/color-modes.md b/site/content/docs/5.3/customize/color-modes.md index 945d5ec336..0202532c83 100644 --- a/site/content/docs/5.3/customize/color-modes.md +++ b/site/content/docs/5.3/customize/color-modes.md @@ -177,6 +177,53 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu ``` +## Always go back to main theme + +{{< added-in "5.3.3" >}} + +Always have your components branded with the main theme of your page by using `data-bs-theme="body"`. If your custom themes were built on top of `color-mode()` mixin, this _back-to-root_ effect will also affect your custom themes. + +Here is an example on a light themed navbar with `data-bs-theme="body` on top of the `.dropdown-menu`. + +{{< example >}} + +{{< /example >}} + ## 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, ``. 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. diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index ffb40c0c4a..7dd0454125 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode. ```css {{< root.inline >}} {{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} +{{- $match := findRE `:root,\n:root\[data-bs-theme=light\] \[data-bs-theme=body\],\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} {{- if (eq (len $match) 0) -}} {{- errorf "Got no matches for :root in %q!" $.Page.Path -}}