Merge pull request #32 from peterszarvas94/main

Add dark mode to the website
bigskysoftware · Jul 8, 2024 · c5a7374 · c5a7374
2 parents b3be24f + 38f1853
commit c5a7374
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/www/index.html b/www/index.html
@@ -9,6 +9,8 @@
             max-width: 768px;
             margin: auto;
             padding: 4px 4px;
+            background-color: var(--bgColor);
+            color: var(--textColor);
         }
 
         .blue {
@@ -40,6 +42,9 @@
             padding: 12px;
             border-radius: 4px;
             margin-bottom: 12px;
+            background-color: var(--bgColor);
+            color: var(--textColor);
+            border-color: var(--textColor);
         }
 
         main {
@@ -61,6 +66,28 @@
             padding: 12px;
             line-height: 1.8em;
         }
+
+        a {
+            color: var(--linkColor);
+        }
+
+        a:hover {
+            opacity: 0.6;
+        }
+
+        :root {
+            --bgColor: #ffffff;
+            --textColor: #1f1f1f;
+            --linkColor: #3366cc;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bgColor: #1f1f1f;
+                --textColor: #ffffff;
+                --linkColor: #5b96d5;
+            }
+        }
     </style>
     <script src="_hyperscript.min.js"></script>
 </head>