Next.ts Dark mode 만들기

Next.ts Dark mode 만들기

다크모드 기능이 요즘 기본적인 기능으로 자리 잡혀 가고 있는 중이다.
next-themes 사용해서 구현 해보았다

설치 방법

$ npm install next-themes

$ yarn add next-themes

작업 환경 설정

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ThemeProvider } from 'next-themes'

export default function App({ Component, pageProps }: AppProps) {
  return (
    // ThemeProvider 컴포넌트를 감싸준다

    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

DarkMode Toggle button 만들기

import React from 'react'
import { useTheme } from 'next-themes'

const Toggle = () => {
  const { theme, setTheme } = useTheme()
  return (
    <>
      <button
        type="button"
        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      >
        다크 모드 토글 버튼@@!
      </button>
    </>
  )
}

export default Toggle

import useTheme 해서 상태 관리를 만들어 주었다
setTheme theme === 'dark' ? 'light' : 'dark' 상항 연산자를 이용하여 완성했다!

완성 결과

next-themes 라이브러리 이용하여 아주쉽게 다크 모드 기능을 구현 하였다.