try dark theme switcher

viperML · viperML · commit 6422af2fe64b · 2024-06-19T14:59:28.000+02:00
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -3,12 +3,44 @@
 ---
 
 <header
-  class="bg-neutral-300 border-gray-200 border-b-2 backdrop-filter backdrop-blur-lg bg-opacity-30 fixed w-screen top-0 z-50"
+  class="bg-neutral-300 dark:bg-zinc-900 border-gray-200 border-b-2 backdrop-filter backdrop-blur-lg bg-opacity-30 fixed w-screen top-0 z-50"
 >
   <nav class="flex justify-between p-4 font-semibold">
     <a href="/">ayats.org</a>
     <ul>
       <a href="/blog/">Blog</a>
+      <a dark-theme-button>Theme</a>
     </ul>
   </nav>
 </header>
+
+<script>
+  function loadTheme() {
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }
+  loadTheme();
+
+  const btn = document.querySelectorAll("[dark-theme-button]");
+  console.log(btn);
+
+  btn.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      if (localStorage.theme === "dark") {
+        localStorage.theme = "light";
+      } else {
+        localStorage.theme = "dark";
+      }
+      loadTheme();
+    });
+  });
+
+  console.log("HELLO");
+</script>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -11,7 +11,7 @@ import Footer from '../components/Footer.astro';
     <meta name="generator" content={Astro.generator} />
   </head>
 
-  <body class="m-auto text-lg">
+  <body class="m-auto text-base md:text-lg">
 
     <NavBar class="h-screen"/>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'tailwindcss'
 
 export default {
+  darkMode: 'selector',
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
