fix dark/light mode detection #6

src/components/ThemeController.astro

@@ -1,6 +1,41 @@
+<script>
+  // Function to initialize theme based on user preference or browser setting
+  function initializeTheme() {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = savedTheme || (prefersDarkMode ? 'black' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+    updateToggleButton(theme);
+  }
+
+  // Function to toggle between light and dark themes
+  function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'black' : 'light';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateToggleButton(newTheme);
+  }
+
+  // Function to update the toggle button text based on the current theme
+  function updateToggleButton(theme: string) {
+    const v = theme === 'light' ? false : true; 
+    const checkbox = document.getElementById('theme-toggle') as HTMLInputElement | null;
+    console.log(checkbox)
+    if (checkbox)
+      checkbox.checked = v;
+  }
+
+  // Initialize the theme when the page loads
+  initializeTheme();
+
+  // Attach event listener to the toggle button
+  document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
+</script>
+
 <label class="swap swap-rotate">
   <!-- this hidden checkbox controls the state -->
-  <input type="checkbox" class="theme-controller" value="synthwave" />
+  <input id="theme-toggle" type="checkbox" class="theme-controller" value="black"/>
 
   <!-- sun icon -->
   <svg

src/layouts/BaseLayout.astro

@@ -16,7 +16,7 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/astro-poc/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>

tailwind.config.mjs

@@ -9,6 +9,22 @@ export default {
     require('daisyui'),
   ],
   daisyui: {
-    themes: ["corporate", "synthwave"],
+    themes: [
+      {
+        light: {
+          ...require("daisyui/src/theming/themes")["light"],
+          primary: "#00a896",
+          secondary: "#c70039",
+        },
+      },
+      {
+        black: {
+          ...require("daisyui/src/theming/themes")["black"],
+          primary: "#00a896",
+          secondary: "#c70039",
+        },
+      }
+    ],
   },
+  darkMode: ['class', '[data-theme="black"]']
 }