modified: index.html

modified: style.css new file: theme.js
3 weeks ago · 45e143f784
parent 5a728445b5
commit 45e143f784
3 changed files with 42 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,8 @@
    <html>
        <head>
            <title>CiF Political DB</title>
-            <link href="style.css" rel="stylesheet"
+            <link href="style.css" rel="stylesheet">
+            <script src="theme.js"></script>
        </head>

        <body>
--- a/style.css
+++ b/style.css
@ -9,14 +9,6 @@
    --highlight: #ff5a99;
 }

-  body {
-    background: var(--background);
-    color: var(--text);
-    position:absolute;
-    margin-top: 10px;
-    font-family: Futura;
-    }
-
 .disclaimer {
        color: red;
    }
@ -33,3 +25,23 @@
     transform: translateY(0);
    }
   }
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #fff3f9;
+        color: #ffa7c7;
+        position:absolute;
+        margin-top: 10px;
+        font-family: Futura;
+        }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #060606;
+        color: #00d791;
+        position:absolute;
+        margin-top: 10px;
+        font-family: Futura;
+    }
+}
--- a/theme.js
+++ b/theme.js
@ -0,0 +1,19 @@
+function detectTheme() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      // Dark mode
+      console.log("Dark mode detected");
+      // Add your dark mode styles or trigger a CSS class change here
+      document.body.classList.add('dark-mode');
+    } else {
+      // Light mode
+      console.log("Light mode detected");
+      // Add your light mode styles or trigger a CSS class change here
+      document.body.classList.add('light-mode');
+    }
+  }
+  
+  // Call the function to detect the initial theme
+  detectTheme();
+  
+  // Listen for changes in the system preference
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectTheme);