69 lines
1.3 KiB
SCSS
69 lines
1.3 KiB
SCSS
@mixin light-theme-font {
|
|
--font-weight-regular: 400;
|
|
--tracking: -0.006em;
|
|
}
|
|
|
|
@mixin dark-theme-font {
|
|
--font-weight-regular: 300;
|
|
--tracking: 0;
|
|
}
|
|
|
|
/**
|
|
* Palette
|
|
*/
|
|
@mixin light-theme {
|
|
color-scheme: light;
|
|
|
|
--brand: hsl(22, 60%, 60%);
|
|
--brand-variant: hsl(22, 60%, 50%);
|
|
--primary-accent: hsl(232, 60%, 60%);
|
|
--secondary-accent: hsl(172, 35%, 35%);
|
|
--text1: hsl(22, 96%, 6%);
|
|
--text2: hsl(20, 10%, 30%);
|
|
--surface1: hsl(20, 12%, 95%);
|
|
--surface2: hsl(24, 10%, 90%);
|
|
--surface3: hsl(22, 11%, 85%);
|
|
--surface4: hsl(24, 10%, 80%);
|
|
--img-opacity: 1;
|
|
--shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
|
|
@include light-theme-font;
|
|
}
|
|
|
|
@mixin dark-theme {
|
|
color-scheme: dark;
|
|
|
|
--brand: hsl(22, 45%, 45%);
|
|
--brand-variant: hsl(22, 45%, 55%);
|
|
--primary-accent: hsl(232, 65%, 65%);
|
|
--secondary-accent: hsl(172, 65%, 65%);
|
|
--text1: hsl(22, 22%, 90%);
|
|
--text2: hsl(20, 10%, 70%);
|
|
--surface1: hsl(24, 0%, 10%);
|
|
--surface2: hsl(23, 0%, 15%);
|
|
--surface3: hsl(24, 0%, 20%);
|
|
--surface4: hsl(23, 0%, 25%);
|
|
--img-opacity: .8;
|
|
--shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
|
|
@include dark-theme-font;
|
|
}
|
|
|
|
|
|
:root {
|
|
@include light-theme;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
@include dark-theme;
|
|
}
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
@include light-theme;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
@include dark-theme;
|
|
} |