결과
npm install next-themes- provider를 만든다
'use client'
import {ThemeProvider} from "next-themes";
import {ReactNode} from "react";
const ThemeProviders = ({ children }: { children: ReactNode }) => {
return (
<ThemeProvider>
{children}
</ThemeProvider>
)
}
export default ThemeProviders- layout에 추가해준다
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang='en' className={nunitoSans.className}>
<body>
<ThemeProviders>
{children}
</ThemeProviders>
</body>
</html>
)
}- 모드를 변경할 곳을 만든다 (저는 navbar에서 변경할 예정)
'use client'
import { useTheme } from 'next-themes'
const Navbar = () => {
const { theme, setTheme } = useTheme()
return (
<select value={theme} onChange={e => setTheme(e.target.value)}>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
)
}
export default Navbar- tailwind에서
dark부분만 추가해서 사용할 수 있도록 추가해준다
'use client'
import { useTheme } from 'next-themes'
const Navbar = () => {
const { theme, setTheme } = useTheme()
// 추가된 부분
if (typeof window !== 'undefined') {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.remove('dark')
} else {
document.documentElement.classList.add('dark')
}
}
return (
<select value={theme} onChange={e => setTheme(e.target.value)}>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
)
}
export default Navbar// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class', // 추가된 부분
plugins: [],
}
export default config- global 스타일 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
word-break: break-word;
}
html {
scroll-behavior: smooth;
}
//추가된 부분
body {
--background: white;
--foreground: black;
}
[data-theme='dark'] body {
--background: black;
--foreground: white;
}- main page에 테스트 용 추가
export default function Home() {
return (
<div className="bg-gray-800 dark:bg-gray-200 p-4">
<p className="text-white dark:text-black">This is some text.</p>
</div>
)
}결과
rnrnrnr