728x90
반응형
* Next.js에 Tailwind css를 적용시킨 후 따라해주세요.
1. next-themes 설치
# NPM
npm install next-themes
# Yarn
yarn add next-themes
2. Root Layout에 ThemeProvider 추가
import "@/styles/globals.css";
import { ThemeProvider } from 'next-themes';
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html suppressHydrationWarning>
<body>
<ThemeProvider attribute='class'>
{children}
</ThemeProvider>
</body>
</html>
);
}
- ThemeProvider가 children을 감싸도록 작성합니다.
- 경고 표시를 무시하기 위해 html 태그에 suppressHydrationWarning를 입력합니다.
- 추가적인 설정이 없다면 system이 기본 테마로 설정됩니다.
3. tailwind.config.js에 다크모드 설정 추가
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
darkMode: 'class', // 다크 모드를 클래스 기반으로 설정
plugins: [],
};
export default config;
darkMode: 'class' 를 추가하여 클래스 기반으로 다크모드일때의 스타일을 지정할 수 있도록 설정합니다.
4. 다크모드 스타일 지정
export default function Page() {
return (
<div className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">
기본인 light 모드에서는 text-gray-600의 색상에서 hover시 text-gray-900으로 색이 변경되며 더욱 진해집니다.
dartk 모드에서는 text-gray-300의 색상에서 hover시 text-gray-100으로 색이 변경되며 더욱 밝아집니다.
</div>
);
}
5. 테마 변경 컴포넌트
import { useState } from "react";
import { useTheme } from "next-themes";
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
import BedtimeOutlinedIcon from '@mui/icons-material/BedtimeOutlined';
import MonitorIcon from '@mui/icons-material/Monitor';
const ThemeSelector: React.FC = () => {
const { theme, setTheme } = useTheme();
const [themeToggle, setThemeToggle] = useState(false);
const themeShowToggle = () => {
setThemeToggle(!themeToggle);
};
const handleChange = (themeValue: string) => {
setTheme(themeValue);
setThemeToggle(false);
};
return (
<div className="relative">
<div className="text-blue-500 mr-6 cursor-pointer" onClick={themeShowToggle}>
{theme === 'light'
? <LightModeOutlinedIcon id="theme_light"/>
: theme === 'dark'
? <BedtimeOutlinedIcon id="theme_dark"/>
: <MonitorIcon id="theme_system"/>}
</div>
{themeToggle &&
<div className="absolute top-16 right-4 w-28 bg-white shadow-lg py-1 rounded-md border-solid border border-gray-300 text-gray-900 font-medium text-sm dark:text-gray-100 dark:bg-backDarkColor">
<div className={["flex flex-row cursor-pointer px-3 py-1 hover:bg-gray-100 dark:hover:bg-zinc-800", theme === 'light' && "text-blue-500"].join(' ')} onClick={() => handleChange('light')}>
<LightModeOutlinedIcon className={[theme === 'light'?"text-blue-500":"text-gray-400", "w-5 mr-2"].join(' ')}/>
Light
</div>
<div className={["flex flex-row cursor-pointer px-3 py-1 hover:bg-gray-100 dark:hover:bg-zinc-800", theme === 'dark' && "text-blue-500"].join(' ')} onClick={() => handleChange('dark')}>
<BedtimeOutlinedIcon className={[theme === 'dark'?"text-blue-500":"text-gray-400", "w-5 mr-2"].join(' ')}/>
Dark
</div>
<div className={["flex flex-row cursor-pointer px-3 py-1 hover:bg-gray-100 dark:hover:bg-zinc-800", theme === 'system' && "text-blue-500"].join(' ')} onClick={() => handleChange('system')}>
<MonitorIcon className={[theme === 'system'?"text-blue-500":"text-gray-400", "w-5 mr-2"].join(' ')}/>
System
</div>
</div>
}
</div>
);
};
export default ThemeSelector;
* MUI(Material UI) 아이콘이 사용된 코드입니다.
* 다듬어지지 않은 예시 코드입니다. 실제로 사용시에는 새로 만들거나 다듬어서 사용하시길 추천드립니다.
- useTheme()를 통해 현재 설정된 theme를 불러올 수 있고, setTheme를 사용하여 테마 설정을 변경할 수 있습니다.
(system, light, dark 등으로 설정)
[next-themes 공식문서]
https://github.com/pacocoursey/next-themes
GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme wi
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - pacocoursey/next-themes
github.com
728x90
반응형
'Frontend > NextJS' 카테고리의 다른 글
| [Next.js] vercel로 Postgres Database 연동하기 (0) | 2024.03.21 |
|---|---|
| [Next.js] SVGR을 사용해서 SVG를 컴포넌트로 import하는 방법 (0) | 2024.03.15 |
| [Next.js] react-syntax-highlighter로 코드 하이라이트 적용 (0) | 2024.03.14 |
| [Next.js] Next.js 프로젝트 생성 (0) | 2024.03.11 |
