mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-21 04:41:36 +02:00
Add color-scheme mixin
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
Reference in New Issue
Block a user