implement theme setting

2026-04-09 18:09:26 +00:00
parent 2f0082708e
commit 5e8c609268
12 changed files with 380 additions and 182 deletions
@@ -76,23 +76,21 @@ main {
    );
 }

-@media (prefers-color-scheme: dark) {
-    #background-wrapper {
-        opacity: 0.5;
-    }
-
-    #background-wrapper #sky {
-        --color-1: hsl(188, 100%, 30%);
-        --color-2: hsl(194, 72%, 24%);
-    }
-
-    #background-wrapper #grass-1 {
-        --color-1: hsl(120, 30%, 30%);
-        --color-2: hsl(120, 30%, 24%);
-    }
-
-    #background-wrapper #grass-2 {
-        --color-1: hsl(110, 60%, 30%);
-        --color-2: hsl(110, 50%, 24%);
-    }
+body[theme="dark"] #background-wrapper {
+    opacity: 0.5;
+}
+
+body[theme="dark"] #background-wrapper #sky {
+    --color-1: hsl(188, 100%, 30%);
+    --color-2: hsl(194, 72%, 24%);
+}
+
+body[theme="dark"] #background-wrapper #grass-1 {
+    --color-1: hsl(120, 30%, 30%);
+    --color-2: hsl(120, 30%, 24%);
+}
+
+body[theme="dark"] #background-wrapper #grass-2 {
+    --color-1: hsl(110, 60%, 30%);
+    --color-2: hsl(110, 50%, 24%);
 }