diff --git a/index.html b/index.html
index efbaf49..e01078c 100644
--- 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>
