diff --git a/scss/_root.scss b/scss/_root.scss index cc934f939b..a48dec1391 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -79,9 +79,11 @@ --#{$prefix}highlight-bg: #{$mark-bg}; } +// scss-docs-start root-dark-rule // Boosted mod -[class*="-dark"], -.bg-secondary { +[class*="bg-black"], +[class*="-dark"]:not(.border-dark):not(.text-dark), +[class*="bg-secondary"] { --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; --#{$boosted-prefix}caption-color: #{$table-caption-color-dark}; @@ -106,3 +108,4 @@ } } // End mod +// scss-docs-end root-dark-rule diff --git a/site/content/docs/5.2/customize/css-variables.md b/site/content/docs/5.2/customize/css-variables.md index 0408569a01..7e61f92599 100644 --- a/site/content/docs/5.2/customize/css-variables.md +++ b/site/content/docs/5.2/customize/css-variables.md @@ -36,6 +36,14 @@ Have a look at our table documentation for some [insight into how we're using CS Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. +### Dark text rule + +Using CSS variables allows a better flexibility on certain rules. This way we adapt our text variant color to our dark variants components instead of rewriting rules for each component. This process implies to override some existing CSS variables and to re-initialize those in some cases. + +Here is our proposal to handle the different text variants over the website: + +{{< scss-docs name="root-dark-rule" file="scss/_root.scss" >}} + ## Prefix Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.