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
@ -8,14 +8,6 @@
    --text: #ffa7c7;
    --highlight: #ff5a99;
 }
  body {
    background: var(--background);
    color: var(--text);
    position:absolute;
    margin-top: 10px;
    font-family: Futura;
    }
 .disclaimer {
        color: red;
@ -32,4 +24,24 @@
     opacity: 1;
     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);