Next-themes

✅2줄의 코드로 완벽한 다크 모드
✅prefers-color-scheme을 사용한 시스템 설정
✅색 구성표가 있는 테마 브라우저 UI
✅로드 시 플래시 없음(SSR 및 SSG 모두)
✅탭과 창 간에 테마 동기화
✅테마를 변경할 때 깜박임 비활성화
✅페이지를 특정 테마로 강제 설정
✅클래스 또는 데이터 속성 선택자
✅ useTheme훅

여러 기능들 중에 다크모드를 사용해보겠다.

먼저 전역에 ThemProvider를 뿌려주고

다크모드에 맞추어서 CSS 세팅을 해주면 된다.

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

로 세팅해주면

다크모드를 사용할 수 있다.

https://www.npmjs.com/package/next-themes?activeTab=readme