55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client"
|
|
import Image from "next/image";
|
|
import { useEffect, useState } from "react";
|
|
import { icons } from "#/assets/icons"
|
|
|
|
export default function Theme() {
|
|
const [theme, setTheme] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
const savedTheme = localStorage.getItem("theme") ||
|
|
(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
|
|
setTheme(savedTheme);
|
|
document.body.setAttribute("data-theme", savedTheme);
|
|
}
|
|
}, []);
|
|
|
|
const handleTheme = () => {
|
|
const newTheme = theme === "light" ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
document.body.setAttribute("data-theme", newTheme);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (theme === null) return;
|
|
|
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const handleChange = (e: MediaQueryListEvent) => {
|
|
const newTheme = e.matches ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
localStorage.setItem("theme", newTheme);
|
|
document.body.setAttribute("data-theme", newTheme);
|
|
};
|
|
|
|
mediaQuery.addEventListener("change", handleChange);
|
|
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
}, [theme]);
|
|
|
|
if (theme === null) return null;
|
|
|
|
return (
|
|
<div onClick={handleTheme} className="theme">
|
|
<button type="button" className="icon-border">
|
|
{theme === "light" ? (
|
|
<Image src={icons.sunIcon} alt="Light Mode" width={20} height={20} className="m-[2px]" />
|
|
) : (
|
|
<Image src={icons.moonIcon} alt="Dark Mode" width={20} height={20} className="m-[2px]" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|