35 lines
1.1 KiB
Text
35 lines
1.1 KiB
Text
---
|
|
import DarkModeScriptInline from "./DarkModeScriptInline.astro";
|
|
---
|
|
|
|
<DarkModeScriptInline />
|
|
|
|
<script>
|
|
type ColorScheme = "auto" | "dark" | "light" | undefined;
|
|
|
|
const colorSchemeSetup = () => {
|
|
let colorScheme: ColorScheme = localStorage.colorScheme;
|
|
if (!colorScheme || colorScheme === "auto") {
|
|
colorScheme = matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
|
|
}
|
|
const toggleColorScheme = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
if (colorScheme === "dark") {
|
|
colorScheme = "light";
|
|
document.body.classList.remove("dark");
|
|
} else {
|
|
colorScheme = "dark";
|
|
document.body.classList.add("dark");
|
|
}
|
|
localStorage.colorScheme = colorScheme;
|
|
};
|
|
document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
|
|
button.addEventListener("click", toggleColorScheme);
|
|
button.classList.remove("hidden");
|
|
button.style.removeProperty("display");
|
|
button.setAttribute("aria-hidden", "false");
|
|
});
|
|
};
|
|
|
|
colorSchemeSetup();
|
|
</script>
|