Simple variable overrides for stylesheets (fixes #55)
This commit is contained in:
@ -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" {
|
||||
// COLORS
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
@ -25,6 +42,7 @@
|
||||
}
|
||||
|
||||
@else {
|
||||
// COLORS
|
||||
--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-muted-1: rgb(0 0 0 / 0.05);
|
||||
@ -46,11 +64,6 @@
|
||||
--red-fg: rgb(224 27 36);
|
||||
--yellow-bg: rgb(156 110 3 / 0.1);
|
||||
--yellow-fg: rgb(156 110 3);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
@include theme-variables("light");
|
||||
|
||||
// VARIABLES
|
||||
--active: 0.9;
|
||||
@ -82,14 +95,5 @@
|
||||
--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-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");
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user