honour theme preference, add new random

2023-08-31 08:07:03 +02:00
parent 5cbc55262a
commit 629cb24e90
5 changed files with 33 additions and 2 deletions
--- a/static/styles/global.css
+++ b/static/styles/global.css
@@ -11,6 +11,7 @@ body {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 35px 10vw;
+  background-color: white;
  color: #222;
 }

@@ -115,3 +116,25 @@ label[for="dark-mode"]:hover {
  color: white;
  content: "☀️";
 }
+
+@media (prefers-color-scheme: dark) {
+  #dark-mode + label[for="dark-mode"]::after {
+    color: white;
+    content: "☀";
+  }
+
+  #dark-mode:checked + label[for="dark-mode"]::after {
+    color: black;
+    content: "🌙";
+  }
+
+  #main {
+    background-color: #222;
+    color: white;
+  }
+  
+  #dark-mode:checked ~ #main {
+    background-color: white;
+    color: #222;
+  }
+}