--- title: Dark Mode Implementation impact: MEDIUM impactDescription: User preference and accessibility support tags: styling, theme, darkmode, accessibility --- ## Dark Mode Implementation **Impact: MEDIUM (User preference and accessibility support)** 다크모드를 구현하여 사용자 선호도와 접근성을 지원하세요. ## CSS Variables 기반 테마 ```css /* app/globals.css */ @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --border: 214.3 31.8% 91.4%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --border: 217.2 32.6% 17.5%; } } ``` ## Tailwind dark: 활성화 ```typescript // tailwind.config.ts export default { darkMode: "class", // 또는 "media" // ... }; ``` ## 테마 Provider Island ```tsx // app/theme/client.tsx "use client"; import { createContext, useContext, useEffect, useState } from "react"; type Theme = "light" | "dark" | "system"; interface ThemeContextValue { theme: Theme; setTheme: (theme: Theme) => void; resolvedTheme: "light" | "dark"; } const ThemeContext = createContext(null); export function ThemeProviderIsland({ children }: { children: React.ReactNode }) { const [theme, setTheme] = useState("system"); const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light"); useEffect(() => { // 저장된 테마 복원 const stored = localStorage.getItem("theme") as Theme | null; if (stored) { setTheme(stored); } }, []); useEffect(() => { const root = document.documentElement; if (theme === "system") { const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches; setResolvedTheme(systemDark ? "dark" : "light"); root.classList.toggle("dark", systemDark); } else { setResolvedTheme(theme); root.classList.toggle("dark", theme === "dark"); } localStorage.setItem("theme", theme); }, [theme]); // System 변경 감지 useEffect(() => { if (theme !== "system") return; const mq = window.matchMedia("(prefers-color-scheme: dark)"); const handler = (e: MediaQueryListEvent) => { setResolvedTheme(e.matches ? "dark" : "light"); document.documentElement.classList.toggle("dark", e.matches); }; mq.addEventListener("change", handler); return () => mq.removeEventListener("change", handler); }, [theme]); return ( {children} ); } export function useTheme() { const context = useContext(ThemeContext); if (!context) { throw new Error("useTheme must be used within ThemeProviderIsland"); } return context; } ``` ## 테마 토글 컴포넌트 ```tsx // app/theme/toggle.tsx "use client"; import { useTheme } from "./client"; export function ThemeToggleIsland() { const { theme, setTheme, resolvedTheme } = useTheme(); return ( ); } ``` ## 플래시 방지 스크립트 ```tsx // app/layout.tsx export default function RootLayout({ children }) { return ( {/* 다크모드 플래시 방지 */}