93 lines
1.4 KiB
SCSS
93 lines
1.4 KiB
SCSS
|
@use "colors";
|
||
|
|
||
|
@mixin rebase(
|
||
|
$rebase03,
|
||
|
$rebase02,
|
||
|
$rebase01,
|
||
|
$rebase00,
|
||
|
$rebase0,
|
||
|
$rebase1,
|
||
|
$rebase2,
|
||
|
$rebase3
|
||
|
) {
|
||
|
--foreground: #{$rebase0};
|
||
|
--foreground-lighter: #{$rebase1};
|
||
|
--background: #{$rebase03};
|
||
|
--background-emph: #{$rebase02};
|
||
|
--primary: #{colors.$blue};
|
||
|
|
||
|
background-color: $rebase03;
|
||
|
color: $rebase0;
|
||
|
}
|
||
|
|
||
|
@mixin accentize($accent) {
|
||
|
a,
|
||
|
a:active,
|
||
|
a:visited,
|
||
|
code.url {
|
||
|
color: $accent;
|
||
|
}
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
color: $accent;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
html {
|
||
|
@include rebase(
|
||
|
colors.$base3,
|
||
|
colors.$base2,
|
||
|
colors.$base1,
|
||
|
colors.$base0,
|
||
|
colors.$base00,
|
||
|
colors.$base01,
|
||
|
colors.$base02,
|
||
|
colors.$base03
|
||
|
);
|
||
|
}
|
||
|
|
||
|
@media (prefers-color-scheme: dark) {
|
||
|
html {
|
||
|
@include rebase(
|
||
|
colors.$base03,
|
||
|
colors.$base02,
|
||
|
colors.$base01,
|
||
|
colors.$base00,
|
||
|
colors.$base0,
|
||
|
colors.$base1,
|
||
|
colors.$base2,
|
||
|
colors.$base3
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
html,
|
||
|
body {
|
||
|
color: var(--foreground);
|
||
|
background: var(--background);
|
||
|
|
||
|
* {
|
||
|
color: var(--foreground);
|
||
|
}
|
||
|
|
||
|
h1,
|
||
|
h2,
|
||
|
h3,
|
||
|
h4,
|
||
|
h5,
|
||
|
h6 {
|
||
|
color: var(--foreground-lighter);
|
||
|
border-color: var(--foreground);
|
||
|
}
|
||
|
|
||
|
a,
|
||
|
a:active,
|
||
|
a:visited {
|
||
|
color: var(--foreground-lighter);
|
||
|
}
|
||
|
}
|
||
|
|