Dark Mode (다크 모드)

/* Light Mode (기본) */
:root {
  --color-background: #ffffff;
  --color-text: #171717;
  --color-border: #e5e5e5;
}
 
/* Dark Mode */
:root[data-theme="dark"] {
  --color-background: #171717;
  --color-text: #fafafa;
  --color-border: #404040;
}

@theme {
  /* Light Mode */
  --color-background: #ffffff;
  --color-text: #171717;
}
 
@theme dark {
  /* Dark Mode */
  --color-background: #171717;
  --color-text: #fafafa;
}

// 향후 다크 모드 지원 시 예상 사용법
<div className="bg-background text-text border-border">
  이 요소는 다크 모드에서 자동으로 색상이 변경됩니다
</div>
 
// Tailwind dark: modifier 사용
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  다크 모드 지원 요소
</div>

export default function CustomDarkMode() {
  return (
    <div className="bg-white dark:bg-gray-900">
      <p className="text-gray-900 dark:text-gray-100">수동 다크 모드 지원</p>
      <button className="bg-primary dark:bg-primary-600">Button</button>
    </div>
  );
}

npm install next-themes

// _app.tsx 또는 layout.tsx
import { ThemeProvider } from "next-themes";
 
export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

// 컴포넌트에서 사용
import { useTheme } from "next-themes";
 
export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();
 
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? "🌞" : "🌙"}
    </button>
  );
}

/* globals.css */
:root {
  --background: #ffffff;
  --foreground: #171717;
}
 
:root[data-theme="dark"] {
  --background: #171717;
  --foreground: #fafafa;
}
 
body {
  background-color: var(--background);
  color: var(--foreground);
}