42 lines
1.2 KiB
SCSS
42 lines
1.2 KiB
SCSS
|
@media (prefers-color-scheme: light) {
|
||
|
|
$backgroundColor: white;
|
||
|
|
$textColor: #15202b;
|
||
|
|
$linkColor: royalblue;
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--background-color: $backgroundColor;
|
||
|
|
--faded-background-color: darken($backgroundColor, 10%);
|
||
|
|
--shadow-color: darken($backgroundColor, 10%);
|
||
|
|
--heading-color: darken(royalblue, 10%);
|
||
|
|
--text-color: $textColor;
|
||
|
|
--small-text-color: #6e707f;
|
||
|
|
--smaller-text-color: lighten($textColor, 30%);
|
||
|
|
--faded: lightgray;
|
||
|
|
--hr-color: lightgray;
|
||
|
|
--link-color: $linkColor;
|
||
|
|
--code-color: firebrick;
|
||
|
|
--tag-color: lighten($linkColor, 35%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
$backgroundColor: #202030;
|
||
|
|
$textColor: #cdcdcd;
|
||
|
|
$linkColor: lightskyblue;
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--background-color: $backgroundColor;
|
||
|
|
--faded-background-color: lighten($backgroundColor, 10%);
|
||
|
|
--shadow-color: lighten($backgroundColor, 10%);
|
||
|
|
--heading-color: lighten(lightskyblue, 20%);
|
||
|
|
--text-color: $textColor;
|
||
|
|
--small-text-color: darken($textColor, 8%);
|
||
|
|
--smaller-text-color: darken($textColor, 12%);
|
||
|
|
--faded: #666;
|
||
|
|
--hr-color: gray;
|
||
|
|
--link-color: $linkColor;
|
||
|
|
--code-color: lighten(firebrick, 25%);
|
||
|
|
--tag-color: darken($linkColor, 55%);
|
||
|
|
}
|
||
|
|
}
|