Draft: color scheme changer

2025-06-05 13:05:45 +02:00 · 2025-06-05 13:05:45 +02:00 · 4f90bc8a84
commit 4f90bc8a84
parent e8f2902b86
1 changed files with 43 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,51 @@
 <html>
    <head>
        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
        <title>Cypher Player Assistant</title>
+        <style>
+         :root {
+             --dark-bg: black;
+             --dark-text: black;
+
+             --light-bg: white;
+             --light-text: black;
+
+             --bg: var(--light-bg);
+             --text: var(--light-text);
+         }
+
+         #color-scheme-toggle {
+             display: none;
+         }
+
+         #color-scheme-toggle:checked ~ #color-mode-wrapper .dark-mode-hide {
+             display: none;
+         }
+
+         #color-scheme-toggle:checked ~ #color-mode-wrapper .light-mode-hide {
+             display: initial;
+         }
+
+         .dark-mode-hide {
+             display: initial;
+         }
+
+         .light-mode-hide {
+             display: none;
+         }
+
+         @media(prefers-color-scheme: dark) {
+         }
+
+         @media(prefers-color-scheme: light) {
+         }
+        </style>
    </head>
    <body>
-        <h1>Cypher Player Assistant</h1>
+        <input id="color-scheme-toggle" type="checkbox">
+        <div id="color-scheme-wrapper">
+            <h1>Cypher Player Assistant</h1>
+        </div>
    </body>
 </html>