From 61a7a0963eef7f198e3b2337b99ffcd06f0e0d60 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 15 Sep 2023 15:37:36 +0200 Subject: [PATCH] Fix and add doc --- .../content/docs/5.3/customize/color-modes.md | 47 +++++++++++++++++++ .../docs/5.3/customize/css-variables.md | 2 +- 2 files changed, 48 insertions(+), 1 deletion(-) 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 -}}