hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simple variable overrides for stylesheets (fixes #55)

Browse Source
This commit is contained in:
daudix
2024-08-26 05:39:42 +03:00
parent 58e4507229
commit cb58a187bd
1 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
sass/_variables.scss
View File

@ -1,5 +1,22 @@
@mixin theme-variables($theme) { @mixin theme-variables {
:root {
@content("light");
}
[data-theme="dark"] {
@content("dark");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@content("dark");
}
}
}
@include theme-variables using ($theme) {
@if $theme =="dark" { @if $theme =="dark" {
// COLORS
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9)); --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
--fg-color: rgb(255 255 255); --fg-color: rgb(255 255 255);
--fg-muted-1: rgb(255 255 255 / 0.05); --fg-muted-1: rgb(255 255 255 / 0.05);
@ -25,6 +42,7 @@
} }
@else { @else {
// COLORS
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8)); --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
--fg-color: rgb(0 0 0 / 0.8); --fg-color: rgb(0 0 0 / 0.8);
--fg-muted-1: rgb(0 0 0 / 0.05); --fg-muted-1: rgb(0 0 0 / 0.05);
@ -46,11 +64,6 @@
--red-fg: rgb(224 27 36); --red-fg: rgb(224 27 36);
--yellow-bg: rgb(156 110 3 / 0.1); --yellow-bg: rgb(156 110 3 / 0.1);
--yellow-fg: rgb(156 110 3); --yellow-fg: rgb(156 110 3);
}
}
:root {
@include theme-variables("light");
// VARIABLES // VARIABLES
--active: 0.9; --active: 0.9;
@ -82,14 +95,5 @@
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif; --font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive; --font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
[data-theme="dark"] {
@include theme-variables("dark");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include theme-variables("dark");
} }
} }