22 lines
627 B
TypeScript
22 lines
627 B
TypeScript
|
"use client";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const [dark, setDark] = useState(false);
|
||
|
|
useEffect(() => {
|
||
|
|
const mql = window.matchMedia("(prefers-color-scheme: dark)");
|
||
|
|
setDark(mql.matches);
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
document.documentElement.style.setProperty("--background", dark ? "#0a0a0a" : "#ffffff");
|
||
|
|
document.documentElement.style.setProperty("--foreground", dark ? "#ededed" : "#171717");
|
||
|
|
}, [dark]);
|
||
|
|
return (
|
||
|
|
<button onClick={() => setDark((v) => !v)} style={{ marginLeft: 12 }}>
|
||
|
|
{dark ? "라이트" : "다크"}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|