30 lines
706 B
SCSS
30 lines
706 B
SCSS
|
// This defines theme-specific variables.
|
||
|
|
@mixin theme-variables($theme) {
|
||
|
|
@if $theme =='light' {
|
||
|
|
// Light theme colours.
|
||
|
|
--primary-color: #cd3731;
|
||
|
|
}
|
||
|
|
|
||
|
|
@else if $theme =='dark' {
|
||
|
|
// Dark theme colours.
|
||
|
|
--primary-color: #e35d5d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply light theme variables by default.
|
||
|
|
:root {
|
||
|
|
@include theme-variables('light');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply dark theme variables when dark theme is explicitly set.
|
||
|
|
[data-theme='dark'] {
|
||
|
|
@include theme-variables('dark');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply dark theme variables when user's system prefers dark mode
|
||
|
|
// and the theme is not explicitly set to light.
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root:not([data-theme='light']) {
|
||
|
|
@include theme-variables('dark');
|
||
|
|
}
|
||
|
|
}
|