텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집
공백 변경 숨기기
변경 없는 행 숨기기
줄바꿈 비활성화
레이아웃
비교 단위
텍스트 스타일
구문 강조

Shared Theme Context - 2

생성일 비교 결과 만료 없음
4 삭제
22 행
42 추가
57 행
import { useEffect, useState } from "react";
import {
createElement,
createContext,
type Dispatch,
type PropsWithChildren,
type SetStateAction,
useContext,
useEffect,
useMemo,
useState,
} from "react";



type Theme = "light" | "dark";
type Theme = "light" | "dark";


export function useTheme() {

interface ThemeContextValue {
theme: Theme;
setTheme: Dispatch<SetStateAction<Theme>>;
toggle: () => void;
}


const ThemeContext = createContext<ThemeContextValue | null>(null);


export function ThemeProvider({ children }: PropsWithChildren) {
const [theme, setTheme] = useState<Theme>(() => {
const [theme, setTheme] = useState<Theme>(() => {
if (typeof window !== "undefined") {
if (typeof window !== "undefined") {
return (localStorage.getItem("theme") as Theme) || "light";
return (localStorage.getItem("theme") as Theme) || "light";
}
}
return "light";
return "light";
});
});



useEffect(() => {
useEffect(() => {
const root = document.documentElement;
const root = document.documentElement;
root.classList.toggle("dark", theme === "dark");
root.classList.toggle("dark", theme === "dark");
localStorage.setItem("theme", theme);
localStorage.setItem("theme", theme);
}, [theme]);
}, [theme]);



const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));
const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));
const value = useMemo(() => ({ theme, setTheme, toggle }), [theme]);


return { theme, setTheme, toggle };

return createElement(ThemeContext.Provider, { value }, children);
}


export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
}
}
저장된 비교 결과