90 lines
No EOL
1.4 KiB
SCSS
90 lines
No EOL
1.4 KiB
SCSS
@use "colors";
|
|
|
|
@mixin rebase(
|
|
$rebase03,
|
|
$rebase02,
|
|
$rebase01,
|
|
$rebase00,
|
|
$rebase0,
|
|
$rebase1,
|
|
$rebase2,
|
|
$rebase3
|
|
) {
|
|
--foreground: #{$rebase0};
|
|
--foreground-lighter: #{$rebase1};
|
|
--foreground-lightest: #{$rebase2};
|
|
--background: #{$rebase03};
|
|
--background-lighter: #{$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);
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--foreground-lighter);
|
|
border-color: var(--foreground);
|
|
}
|
|
|
|
a,
|
|
a:active,
|
|
a:visited {
|
|
color: var(--foreground-lighter);
|
|
}
|
|
}
|
|
|