Dark mode

JonathanWoollett-Light · JonathanWoollett-Light · commit ae9ac74a96b5 · 2025-02-23T18:04:39.000Z
Enables dark mode support with automatic theme switching based on a users browser theme.
diff --git a/css/main.css b/css/main.css
@@ -1,14 +1,39 @@
-body {
-    background: #f5f5f5;
+@media (prefers-color-scheme: light) {
+    body {
+        background: #f5f5f5;
+    }
+    
+    .drag {
+        background-color: lightblue;
+    }
+    
+    #header {
+        background: #A0CFFF;
+        color: #3474A8;
+    }
+    
+    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+        background-color: #F5F5E7;
+    }
 }
 
-.drag {
-    background-color: lightblue;
-}
-
-#header {
-    background: #A0CFFF;
-    color: #3474A8;
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #1a1a1a;
+    }
+    
+    .drag {
+        background-color: #1e3a5f;
+    }
+    
+    #header {
+        background: #0d3b66;
+        color: #7ab5e6;
+    }
+    
+    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+        background-color: #2c2c1e;
+    }
 }
 
 #dropzone {
@@ -24,10 +49,6 @@ body {
     opacity: 0;
 }
 
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-    background-color: #F5F5E7;
-}
-
 #data {
     margin-bottom: 0;
 }
diff --git a/index.html b/index.html
@@ -26,12 +26,26 @@
         gtag('js', new Date());
         gtag('config', 'G-N22SYDVQHZ');
     </script>
+    <script>
+        const darkModeMediaQuery = window.matchMedia(
+            "(prefers-color-scheme: dark)",
+        );
+        function applyTheme() {
+            if (darkModeMediaQuery.matches) {
+                document.documentElement.setAttribute("data-bs-theme","dark");
+            } else {
+                document.documentElement.setAttribute("data-bs-theme","light");
+            }
+        }
+        darkModeMediaQuery.addEventListener("change", applyTheme);
+        applyTheme();
+    </script>
 </head>
 <body>
 
 <img src="img/icon.png" style="display: none;"/>
 
-<div id="main-container" class="container shadow bg-white">
+<div id="main-container" class="container shadow">
     <header id="header" class="row align-items-center p-4">
         <img src="img/logo.svg" width="54" height="54" class="col-auto p-0" alt="Database logo"/>
 
