Skip to content

Commit 57228a6

Browse files
julien-deramondmdo
authored andcommitted
Docs: fix typo for Sass vars references in Customize > Color modes > Building with Sass
1 parent 015f06f commit 57228a6

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

site/content/docs/5.2/customize/color-modes.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -155,14 +155,14 @@ Bootstrap does not yet ship with a built-in color mode picker, but you can use t
155155

156156
### Building with Sass
157157

158-
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`.
158+
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`.
159159

160160
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.
161161

162162
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.
163163

164164
```scss
165-
@color-mode-type: data !default;
165+
$color-mode-type: data;
166166

167167
@include color-mode(dark) {
168168
.element {
@@ -184,7 +184,7 @@ Outputs to:
184184
And when setting to `media-query`:
185185

186186
```scss
187-
@color-mode-type: media-query;
187+
$color-mode-type: media-query;
188188

189189
@include color-mode(dark) {
190190
.element {

0 commit comments

Comments
 (0)