Color scheme changer

2025-06-05 13:05:45 +02:00 · 2025-06-05 13:05:45 +02:00 · b938272cb2
commit b938272cb2
parent e8f2902b86
1 changed files with 182 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,190 @@
 <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 Color Scheme */
+             --dark-bg: black;
+             --dark-text: white;
+
+             /* Light Color Scheme */
+             --light-bg: white;
+             --light-text: black;
+
+             /* Defaults */
+             --bg: var(--light-bg);
+             --text: var(--light-text);
+         }
+
+         #color-scheme {
+             display: none;
+         }
+
+         #color-scheme:checked ~ .color-scheme-wrapper {
+             --bg: var(--dark-bg);
+             --text: var(--dark-text);
+         }
+
+         #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
+             display: none;
+         }
+
+         #color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
+             display: initial;
+         }
+
+         .dark-mode-hide {
+             display: initial;
+         }
+
+         .light-mode-hide {
+             display: none;
+         }
+
+         @media(prefers-color-scheme: dark) {
+             :root {
+                 --bg: var(--dark-bg);
+                 --text: var(--dark-text);
+             }
+
+             #color-scheme:checked ~ .color-scheme-wrapper {
+                 --bg: var(--light-bg);
+                 --text: var(--light-text);
+             }
+
+             #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
+                 display: initial;
+             }
+
+             #color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
+                 display: none;
+             }
+
+             .dark-mode-hide {
+                 display: none;
+             }
+
+             .light-mode-hide {
+                 display: initial;
+             }
+         }
+
+         /* CSS Reset */
+
+         *, *::before, *::after {
+             box-sizing: border-box;
+         }
+
+         ul[class], ol[class] {
+             padding: 0;
+         }
+
+         body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
+             margin: 0;
+         }
+
+         body {
+             min-height: 100vh;
+             scroll-behavior: smooth;
+             text-rendering: optimizeSpeed;
+             line-height: 1.5;
+         }
+
+         ul[class], ol[class] {
+             list-style: none;
+         }
+
+         a:not([class]) {
+             text-decoration-skip-ink: auto;
+         }
+
+         img {
+             max-width: 100%;
+             display: block;
+         }
+
+         article > * + * {
+             margin-top: 1em;
+         }
+
+         input, button, textarea, select {
+             font: inherit;
+         }
+
+         @media(prefers-reduced-motion: reduce) {
+             * {
+                 animation-duration: 0.01ms !important;
+                 animation-iteration-count: 1 !important;
+                 transition-duration: 0.01ms !important;
+                 scroll-behavior: auto !important;
+             }
+         }
+
+         /* Actual page style */
+
+         .color-scheme-wrapper {
+             min-height: 100vh;
+             background: var(--bg);
+             color: var(--text);
+         }
+
+         #color-scheme-changer {
+             position: fixed;
+             text-align: center;
+             top: 0;
+             right: 0;
+             font-size: 150%;
+             width: 1.5em;
+             cursor: pointer;
+         }
+
+         .color-scheme-toggle {
+             cursor: pointer;
+         }
+
+         .color-scheme-toggle span {
+             cursor: pointer;
+         }
+
+         .dark-mode-hide, .light-mode-hide {
+             cursor: pointer;
+         }
+
+         .dark-mode-hide {
+             background-color: var(--dark-bg);
+             color: var(--dark-text);
+         }
+
+         .light-mode-hide {
+             background-color: var(--light-bg);
+             color: var(--light-text);
+         }
+
+         body {
+             background-color: var(--bg);
+             color: var(--text);
+             font-family: sans-serif;
+         }
+
+         h1 {
+             width: 100%;
+             font-family: serif;
+             text-align: center;
+         }
+        </style>
    </head>
    <body>
-        <h1>Cypher Player Assistant</h1>
+        <input id="color-scheme" type="checkbox">
+        <div class="color-scheme-wrapper">
+            <div id="color-scheme-changer">
+                <label for="color-scheme" id="color-scheme-toggle">
+                    <span class="dark-mode-hide">☽</span>
+                    <span class="light-mode-hide">☼</span>
+                </label>
+            </div>
+            <h1>Cypher Player Assistant</h1>
+        </div>
    </body>
 </html>