36 lines
1 KiB
Text
36 lines
1 KiB
Text
.theme-mixin(@light: bool) {
|
|
// TODO: awful, use just hsl() instead of magic multipliers or percentages in lighten/darken
|
|
// Also, it's not good to depend on the background color.
|
|
// Maybe, implement MD3 guidelines.
|
|
@bg: if(@light, #e8e8ff, #181822);
|
|
@fg: if(@light, #111111, #eeeeee);
|
|
@bg-sec: if(@light, darken(@bg, 10%), lighten(@bg, 30%));
|
|
@mult: if(@light, 0.75, 2.75);
|
|
@color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
|
|
@color2: spin(@color1, 40);
|
|
@accent: if(@light, darken(@color1, 10%), lighten(@color1, 40%));
|
|
|
|
--bg: @bg;
|
|
--fg: @fg;
|
|
--bg-sec: @bg-sec;
|
|
--accent: @accent;
|
|
--color1: @color1;
|
|
--color2: @color2;
|
|
--gradient: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
|
|
--bg-gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%);
|
|
}
|
|
|
|
body {
|
|
.theme-mixin(true);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-mixin(false);
|
|
}
|
|
|
|
&.dark {
|
|
.theme-mixin(false);
|
|
}
|
|
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|