By default the color scheme is selected according to prefers-color-scheme
.
Use .light-scheme
or .dark-scheme
to specify mode:
<div class="light-scheme padding-3 background">
<button type="button" class="button button--filled">Button</button>
</div>
<div class="dark-scheme padding-3 background">
<button type="button" class="button button--filled">Button</button>
</div>
Generate custom color scheme:
:root {
@include color-scheme(
$primary: #3A691E,
$secondary: #56624D,
$tertiary: #1E686A,
$neutral: #596B86,
$neutral-variant: #596B86,
$error: #B12825
);
}
It will generate light and dark scheme.
In addition, light or dark themes can be generated separately.
.my-light-scheme {
@include light-scheme(
$primary: #3A691E,
$secondary: #56624D,
$tertiary: #1E686A,
$neutral: #596B86,
$neutral-variant: #596B86,
$error: #B12825
);
}
.my-dark-scheme {
@include dark-scheme(
$primary: #3A691E,
$secondary: #56624D,
$tertiary: #1E686A,
$neutral: #596B86,
$neutral-variant: #596B86,
$error: #B12825
);
}