feat(icons): move to astro-icon and change dark mode accordingly

astro.config.mjs

@@ -1,6 +1,7 @@
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 import remarkMath from "remark-math";
 
@@ -14,5 +15,12 @@ export default defineConfig({
     },
     remarkPlugins: [remarkMath],
   },
-  integrations: [tailwind(), sitemap(), react()],
+  integrations: [
+    tailwind(),
+    sitemap(),
+    react(),
+    icon({
+      iconDir: "src/assets/icons",
+    }),
+  ],
 });

package.json

@@ -25,10 +25,10 @@
     "@fontsource/inter": "^5.0.20",
     "@fontsource/outfit": "^5.0.14",
     "astro": "^3.6.5",
+    "astro-icon": "^1.1.1",
     "astro-seo": "^0.8.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.292.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-math": "^6.0.0",

src/components/general/Footer.astro

@@ -1,9 +1,9 @@
 ---
-import { info } from "@/data/info";
 import { buttonVariants } from "@/components/ui/button";
-import { Github, Linkedin, Mail } from "lucide-react";
+import { info } from "@/data/info";
+import { Icon } from "astro-icon/components";
 
-const iconSize = 20;
+const iconSize = 25;
 ---
 
 <footer
@@ -20,23 +20,23 @@ const iconSize = 20;
       href={info.socialMedia.github}
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
-      ><Github size={iconSize} aria-label="GitHub Icon" />
+      ><Icon name="github" size={iconSize} aria-label="GitHub Icon" />
     </a>
     <a
       aria-label="LinkedIn"
       href={info.socialMedia.linkedin}
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
     >
-      <Linkedin size={iconSize} aria-label="LinkedIn Icon" />
+      <Icon name="linkedin" size={iconSize} aria-label="LinkedIn Icon" />
     </a>
     <a
-      aria-label="Email"
+      aria-label="E-Mail"
       href={`mailto:${info.socialMedia.email}`}
       class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
       target="_blank"
     >
-      <Mail size={iconSize} aria-label="Email Icon" />
+      <Icon name="email" size={iconSize} aria-label="Email Icon" />
     </a>
   </div>
 </footer>

src/components/general/Navbar.astro

@@ -1,8 +1,10 @@
 ---
+import { Button } from "@/components/ui/button";
 import { info } from "@/data/info";
 import { createLogo } from "@/utils/logo";
-import { Moon } from "lucide-react";
-import { Button } from "../ui/button";
+import { Icon } from "astro-icon/components";
+
+const iconSize = 25;
 ---
 
 <header class="container mb-16 flex h-20 items-center justify-between space-x-4 md:h-28" aria-label="Header">
@@ -17,53 +19,59 @@ import { Button } from "../ui/button";
       href="/projects">Projekte</a
     >
     <Button id="theme-button" variant="ghost" size="icon-sm" aria-label="Theme Switch">
-      <Moon size={20} aria-label="Theme Switch Icon" />
+      <Icon id="icon-dark" class="hidden" name="sun" size={25} aria-label="Theme Switch Icon" />
+      <Icon id="icon-light" name="moon" size={25} aria-label="Theme Switch Icon" />
     </Button>
   </nav>
 </header>
 
 <script is:inline>
-  const moon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-label="Theme Switch Icon"><path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>`;
-  const sun = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-label="Theme Switch Icon"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>`;
-
-  const themeButton = document.getElementById("theme-button");
-  let isDark;
-
-  const theme = (() => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
-      return localStorage.getItem("theme");
-    }
-    if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "light";
-  })();
+  document.addEventListener("DOMContentLoaded", () => {
+    const themeButton = document.getElementById("theme-button");
+    const iconDark = document.getElementById("icon-dark");
+    const iconLight = document.getElementById("icon-light");
+    let isDark;
 
-  // Change the class of the html element to contain the theme
-  if (theme === "light") {
-    document.documentElement.setAttribute("class", "light");
-    themeButton.innerHTML = moon;
-    isDark = true;
-  } else {
-    document.documentElement.setAttribute("class", "dark");
-    themeButton.innerHTML = sun;
-    isDark = false;
-  }
-  localStorage.setItem("theme", theme);
+    const theme = (() => {
+      if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+        return localStorage.getItem("theme");
+      }
+      if (document.documentElement.classList.contains("dark")) {
+        return "dark";
+      }
+      return "light";
+    })();
 
-  const darkModeHandler = () => {
-    if (isDark) {
-      document.documentElement.setAttribute("class", "dark");
-      localStorage.theme = "dark";
+    // Change the class of the html element to contain the theme
+    if (theme === "light") {
+      document.documentElement.setAttribute("class", "light");
+      iconDark.classList.add("hidden");
+      iconLight.classList.remove("hidden");
       isDark = false;
-      themeButton.innerHTML = sun;
     } else {
-      document.documentElement.setAttribute("class", "light");
-      localStorage.theme = "light";
+      document.documentElement.setAttribute("class", "dark");
+      iconDark.classList.remove("hidden");
+      iconLight.classList.add("hidden");
       isDark = true;
-      themeButton.innerHTML = moon;
     }
-  };
+    localStorage.setItem("theme", theme);
+
+    const darkModeHandler = () => {
+      if (isDark) {
+        document.documentElement.setAttribute("class", "light");
+        localStorage.theme = "light";
+        isDark = false;
+        iconDark.classList.add("hidden");
+        iconLight.classList.remove("hidden");
+      } else {
+        document.documentElement.setAttribute("class", "dark");
+        localStorage.theme = "dark";
+        isDark = true;
+        iconDark.classList.remove("hidden");
+        iconLight.classList.add("hidden");
+      }
+    };
 
-  themeButton.addEventListener("click", darkModeHandler);
+    themeButton.addEventListener("click", darkModeHandler);
+  });
 </script>

src/layouts/Layout.astro

@@ -70,6 +70,24 @@ const {
         ],
       }}
     />
+    <script is:inline>
+      const getThemePreference = () => {
+        if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+          return localStorage.getItem("theme");
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      };
+      const isDark = getThemePreference() === "dark";
+      document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+
+      if (typeof localStorage !== "undefined") {
+        const observer = new MutationObserver(() => {
+          const isDark = document.documentElement.classList.contains("dark");
+          localStorage.setItem("theme", isDark ? "dark" : "light");
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      }
+    </script>
   </head><body>
     <Navbar />
     <main class={`container space-y-16 md:space-y-20 lg:space-y-24`} aria-label={label}>