kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Add color-scheme mixin

Browse source
This commit is contained in:
Mark Otto 2021-01-11 21:02:26 -08:00 committed by Mark Otto
parent c864852135
commit 2d2f5b3dfd
3 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
scss/_mixins.scss
View file

@ -10,6 +10,7 @@
// Helpers // Helpers
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/color-scheme";
@import "mixins/image"; @import "mixins/image";
@import "mixins/resize"; @import "mixins/resize";
@import "mixins/visually-hidden"; @import "mixins/visually-hidden";

17
scss/mixins/_color-scheme.scss Normal file
View file

@ -0,0 +1,17 @@
// scss-docs-start mixin-color-scheme
@mixin color-scheme($name) {
@if $name == dark {
@media (prefers-color-scheme: dark) {
@content;
}
} @else if $name == light {
@media (prefers-color-scheme: light) {
@content;
}
} @else {
@media (prefers-color-scheme: #{$name}) {
@content;
}
}
}
// scss-docs-end mixin-color-scheme

22
site/content/docs/5.0/customize/sass.md
View file

@ -276,3 +276,25 @@ $border-width: 0;
border-radius: subtract($border-radius, $border-width); 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
}
}
```