diff options
Diffstat (limited to 'site/content/docs/5.0')
-rw-r--r-- | site/content/docs/5.0/customize/sass.md | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md index 0e0d3fe243..98a6429fb3 100644 --- a/site/content/docs/5.0/customize/sass.md +++ b/site/content/docs/5.0/customize/sass.md @@ -276,3 +276,25 @@ $border-width: 0; border-radius: subtract($border-radius, $border-width); } ``` + +## Mixins + +Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project. + +### Color schemes + +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. + +{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} + +```scss +.custom-element { + @include color-scheme(dark) { + // Insert dark mode styles here + } + + @include color-scheme(custom-named-scheme) { + // Insert custom color scheme styles here + } +} +``` |