[Next.js] Tailwind css+next-themes 로 다크모드 구현하기

러아니푸 2024. 4. 30. 23:54

2024. 4. 30. 23:54

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 > Next.js' 카테고리의 다른 글

[Next.js] NextAuth.js + Prisma 로그인 기능 개발하기 (0)	2024.05.17
[Next.js] Prisma로 기존 MYSQL 연동하기 (0)	2024.05.03
[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

러아니푸의 기록