45 lines
1.2 KiB
Plaintext
45 lines
1.2 KiB
Plaintext
---
|
|
// Path: src/components/Navbar/DarkModeToggle.astro
|
|
import Sun from "../SVGs/Sun.astro";
|
|
import Moon from "../SVGs/Moon.astro";
|
|
import styles from "./DarkModeToggle.module.scss";
|
|
---
|
|
|
|
<button id="theme-toggle" aria-label="Toggle Dark Mode" class={styles["toggle-btn"]}>
|
|
<div class={styles["icon-container"]}>
|
|
<span class={`${styles["color-icon"]} ${styles["moon-wrapper"]}`}>
|
|
<Moon />
|
|
</span>
|
|
<span class={`${styles["color-icon"]} ${styles["sun-wrapper"]}`}>
|
|
<Sun />
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
<script>
|
|
const handleToggleClick = () => {
|
|
const root = document.documentElement;
|
|
const isDark = root.classList.contains("dark");
|
|
const targetTheme = isDark ? "light" : "dark";
|
|
|
|
if (targetTheme === "dark") {
|
|
root.classList.add("dark");
|
|
root.setAttribute("data-theme", "dark");
|
|
} else {
|
|
root.classList.remove("dark");
|
|
root.setAttribute("data-theme", "light");
|
|
}
|
|
|
|
localStorage.setItem("theme", targetTheme);
|
|
};
|
|
|
|
document.addEventListener("astro:page-load", () => {
|
|
const toggleBtn = document.getElementById("theme-toggle");
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.removeEventListener("click", handleToggleClick);
|
|
toggleBtn.addEventListener("click", handleToggleClick);
|
|
}
|
|
});
|
|
</script>
|