[Next.js] 페이지 다크모드 구현하기

다크 모드를 next-themes를 이용해 구현한 것을 글로 작성하고자 한다.

1. next-themes 설치하기

npm install next-themes

해당 모듈을 설치해주고, 이가 제대로 설치되었는지 확인해준다. package.json으로 들어가 설치되었는지 확인한다.

해당 모듈은 Html 태그의 className을 "light"와 "dark"로 바꿔준다.

2. 전역에 설정해주기

1) pages/_app.js 수정 전

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

2) pages/_app.js 수정 후

import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

💡 여기서 중요한 점은 attribute를 class로 지정해야 한다.

반응형

3. tailwind.config.js 수정

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class", // 이 설정을 추가 해준다
  theme: {
    extend: {},
  },
  plugins: [],
};

4. 다크모드 버튼 구현하기

import { useTheme } from "next-themes";

export default function DarkModeToggleButton() {
  const { theme, setTheme } = useTheme();
  return (
    <>
       setTheme(theme === "dark" ? "light" : "dark")}
      >
        
          
        
        
          
        
      
    
  );
}

• theme : 위에서 설명한 것처럼 dark, light로 className을 바꿔주기 위해 선언해준다.
• setTheme : theme가 dark이면 달 svg를, light이면 해 svg를 클릭할 수 있게 해준다.
• svg : 달과 해를 선언해주어, 바뀐 것을 시각적으로 알 수 있게 해준다.
• className : className에 style을 주어 해당 svg가 원하는 모양으로 변할 수 있게 한다.

아래와 같은 사이트에서 svg를 복사할 수 있다.

 💡 https://heroicons.com/

 

👇🏻 참고

https://github.com/pacocoursey/next-themes

https://kagrin97-blog.vercel.app/next/darkmode