43 lines
870 B
Text
43 lines
870 B
Text
|
@accent: #5070ca;
|
||
|
|
|
||
|
|
body {
|
||
|
|
@bg-light: #fff;
|
||
|
|
@fg-light: #202020;
|
||
|
|
|
||
|
|
@bg-dark: #222229;
|
||
|
|
@fg-dark: #eee;
|
||
|
|
|
||
|
|
--accent: @accent;
|
||
|
|
|
||
|
|
.light-mixin() {
|
||
|
|
--bg: @bg-light;
|
||
|
|
--fg: @fg-light;
|
||
|
|
--bg-sec: darken(@bg-light, 30%);
|
||
|
|
--fg-sec: lighten(@fg-light, 15%);
|
||
|
|
--accent-bg: darken(@bg-light, 10%);
|
||
|
|
--accent-hl: darken(@accent, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark-mixin() {
|
||
|
|
--bg: @bg-dark;
|
||
|
|
--fg: @fg-dark;
|
||
|
|
--bg-sec: lighten(@bg-dark, 15%);
|
||
|
|
--fg-sec: darken(@bg-light, 25%);
|
||
|
|
--accent-bg: lighten(@bg-dark, 5%);
|
||
|
|
--accent-hl: lighten(@accent, 15%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark-mixin();
|
||
|
|
// &.dark {
|
||
|
|
&[data-dark="1"] {
|
||
|
|
.dark-mixin();
|
||
|
|
}
|
||
|
|
// &.light {
|
||
|
|
&[data-dark="0"] {
|
||
|
|
.light-mixin();
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
.light-mixin();
|
||
|
|
}
|
||
|
|
}
|