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

Add manual theme switcher (fixes #5)

Browse Source
This commit is contained in:
daudix
2024-08-18 02:19:34 +03:00
parent 656a6f2328
commit 67c698b949
10 changed files with 285 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
sass/_variables.scss
View File

@ -1,24 +1,52 @@
@mixin theme-variables($theme) {
@if $theme =="dark" {
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1);
--fg-muted-3: rgba(255, 255, 255, 0.2);
--fg-muted-4: rgba(255, 255, 255, 0.5);
--fg-muted-5: rgba(255, 255, 255, 0.6);
--nav-bg: rgba(25, 25, 25, 0.7);
--blue-bg: rgba(153, 193, 241, 0.1);
--blue-fg: rgb(153, 193, 241);
--green-bg: rgba(143, 240, 164, 0.1);
--green-fg: rgb(143, 240, 164);
--purple-bg: rgba(220, 138, 221, 0.1);
--purple-fg: rgb(220, 138, 221);
--red-bg: rgba(226, 97, 81, 0.1);
--red-fg: rgb(246, 97, 81);
--yellow-bg: rgba(248, 228, 92, 0.1);
--yellow-fg: rgb(248, 228, 92);
--star-featured: rgba(248, 228, 92, 0.05);
color-scheme: dark;
}
@else {
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: rgba(0, 0, 0, 0.1);
--fg-muted-3: rgba(0, 0, 0, 0.2);
--fg-muted-4: rgba(0, 0, 0, 0.5);
--fg-muted-5: rgba(0, 0, 0, 0.6);
--nav-bg: rgba(242, 242, 242, 0.7);
--blue-bg: rgba(53, 132, 228, 0.1);
--blue-fg: rgb(53, 132, 228);
--green-bg: rgba(38, 162, 105, 0.1);
--green-fg: rgb(38, 162, 105);
--purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: rgb(145, 65, 172);
--red-bg: rgba(224, 27, 36, 0.1);
--red-fg: rgb(224, 27, 36);
--yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: rgb(156, 110, 3);
--star-featured: rgba(156, 110, 3, 0.15);
}
}
:root {
// COLORS
--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
--fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: rgba(0, 0, 0, 0.1);
--fg-muted-3: rgba(0, 0, 0, 0.2);
--fg-muted-4: rgba(0, 0, 0, 0.5);
--fg-muted-5: rgba(0, 0, 0, 0.6);
--nav-bg: rgba(242, 242, 242, 0.7);
--blue-bg: rgba(53, 132, 228, 0.1);
--blue-fg: rgb(53, 132, 228);
--green-bg: rgba(38, 162, 105, 0.1);
--green-fg: rgb(38, 162, 105);
--purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: rgb(145, 65, 172);
--red-bg: rgba(224, 27, 36, 0.1);
--red-fg: rgb(224, 27, 36);
--yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: rgb(156, 110, 3);
--star-featured: rgba(156, 110, 3, 0.15);
@include theme-variables("light");
// VARIABLES
--active: 0.9;
@ -50,27 +78,14 @@
--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";
}
@media (prefers-color-scheme: dark) {
// COLORS
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
--fg-color: rgb(255, 255, 255);
--fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: rgba(255, 255, 255, 0.1);
--fg-muted-3: rgba(255, 255, 255, 0.2);
--fg-muted-4: rgba(255, 255, 255, 0.5);
--fg-muted-5: rgba(255, 255, 255, 0.6);
--nav-bg: rgba(25, 25, 25, 0.7);
--blue-bg: rgba(153, 193, 241, 0.1);
--blue-fg: rgb(153, 193, 241);
--green-bg: rgba(143, 240, 164, 0.1);
--green-fg: rgb(143, 240, 164);
--purple-bg: rgba(220, 138, 221, 0.1);
--purple-fg: rgb(220, 138, 221);
--red-bg: rgba(226, 97, 81, 0.1);
--red-fg: rgb(246, 97, 81);
--yellow-bg: rgba(248, 228, 92, 0.1);
--yellow-fg: rgb(248, 228, 92);
--star-featured: rgba(248, 228, 92, 0.05);
[data-theme="dark"] {
@include theme-variables("dark");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include theme-variables("dark");
}
}