add auto dark script

bqminh · bqminh · commit f6bd9975a029 · 2025-05-23T12:01:14.000+10:00
diff --git a/_includes/head.html b/_includes/head.html
@@ -28,4 +28,7 @@
     <![endif]-->
 
     <link rel="stylesheet" href="{{ "/assets/css/cookiealert.css" | prepend: site.baseurl }}">
+
+	<script src="{{ "/assets/js/bootstrap-auto-dark-mode.js" | prepend: site.baseurl }}"></script>
+
 </head>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
 
     {% include head.html %}
 
diff --git a/assets/js/bootstrap-auto-dark-mode.js b/assets/js/bootstrap-auto-dark-mode.js
@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+  function toggleTheme() {
+    const html = document.documentElement;
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDark) {
+      html.setAttribute('data-bs-theme', 'dark');
+    } else {
+      html.setAttribute('data-bs-theme', 'light');
+    }
+  }
+
+  // Initial call to set the correct theme
+  toggleTheme();
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', toggleTheme);
+
+  // Optionally, add a toggle button to allow manual switching
+  // You would need to add a button to your HTML and handle the click event
+  // to toggle the theme.
+});
