84 lines
1.3 KiB
SCSS
84 lines
1.3 KiB
SCSS
@use 'colors';
|
|
@use 'sass:color';
|
|
|
|
@mixin rebase($rebase03, $rebase02, $rebase01, $rebase00, $rebase0, $rebase1, $rebase2, $rebase3) {
|
|
--foreground: #{$rebase0};
|
|
--foreground-lighter: #{$rebase1};
|
|
--foreground-lightest: #{$rebase2};
|
|
--background: #{$rebase03};
|
|
--background-lighter: #{$rebase02};
|
|
--background-lightest: #{color.adjust($rebase02, $lightness: 1.5%)};
|
|
--primary: #{colors.$blue};
|
|
--primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
html {
|
|
@include rebase(
|
|
colors.$base3,
|
|
colors.$base2,
|
|
colors.$base1,
|
|
colors.$base0,
|
|
colors.$base00,
|
|
colors.$base01,
|
|
colors.$base02,
|
|
colors.$base03
|
|
);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|