aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJulien Déramond <[email protected]>2022-12-20 07:58:04 +0100
committerMark Otto <[email protected]>2022-12-20 12:55:10 -0800
commit57228a6b65c7451385e0797b409a637bb042bfc1 (patch)
tree6aa64ed62844cbe61483c656ae7d23248487ffe9
parent015f06fd522fabb96778f416ec214130f84fa3bd (diff)
downloadbootstrap-57228a6b65c7451385e0797b409a637bb042bfc1.tar.xz
bootstrap-57228a6b65c7451385e0797b409a637bb042bfc1.zip
Docs: fix typo for Sass vars references in Customize > Color modes > Building with Sass
-rw-r--r--site/content/docs/5.2/customize/color-modes.md6
1 files changed, 3 insertions, 3 deletions
diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md
index bf1692ae1..55d06ee97 100644
--- a/site/content/docs/5.2/customize/color-modes.md
+++ b/site/content/docs/5.2/customize/color-modes.md
@@ -155,14 +155,14 @@ Bootstrap does not yet ship with a built-in color mode picker, but you can use t
### Building with Sass
-Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `@enable-dark-mode` to `false`.
+Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
```scss
-@color-mode-type: data !default;
+$color-mode-type: data;
@include color-mode(dark) {
.element {
@@ -184,7 +184,7 @@ Outputs to:
And when setting to `media-query`:
```scss
-@color-mode-type: media-query;
+$color-mode-type: media-query;
@include color-mode(dark) {
.element {