Next.js 블로그에 다크모드 적용하기

Stoic Park·

Next.js + tailwindCSS 블로그에 다크모드 적용하기

다크모드를 구현하는 과정을 공유합니다.

1. TailwindCSS 다크모드 설정

Tailwind CSS는 dark: 접두사를 통해 다크모드 스타일을 쉽게 적용할 수 있습니다.

예를 들어:

<Link
className="hover:text-neutral-800 dark:hover:text-neutral-200"
href={path}
>

위 코드에서 dark:hover:text-neutral-200는 다크모드일 때 hover 시 적용될 스타일을 지정합니다.

2. 테마 전환 컴포넌트 구현

다크모드 전환을 위한 ThemeSwitch 컴포넌트를 구현했습니다. 주요 기능은 다음과 같습니다:

테마 상태 관리

const [theme, setTheme] = useState<Theme>('light')

초기 테마 설정

useEffect(() => {
 const savedTheme = localStorage.getItem('theme')
 if (!savedTheme) {
  // 시스템 설정 기반 초기 테마 설정
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const nextTheme = isDark ? 'dark' : 'light'
  applyTheme(nextTheme)
  return
 }
 const currentTheme = localStorage.getItem('theme') as Theme
 applyTheme(currentTheme)
}, [])

테마 적용 함수

const applyTheme = (nextTheme: Theme) => {
 localStorage.setItem('theme', nextTheme)
 setTheme(nextTheme)
 if (nextTheme === 'dark') {
  document.documentElement.classList.add('dark')
 } else {
  document.documentElement.classList.remove('dark')
 }
}

3. 테마 아이콘 구현

사용자가 현재 테마를 시각적으로 확인할 수 있도록 테마별 아이콘을 구현했습니다:

  • 라이트 모드: 태양 아이콘
  • 다크 모드: 달 아이콘

4. 주요 구현 포인트

  1. 클라이언트 사이드 렌더링

    • 'use client' 지시어를 사용하여 클라이언트 컴포넌트로 지정

  2. 로컬 스토리지 활용

    • 사용자가 선택한 테마 설정을 로컬 스토리지에 저장하여 페이지 새로고침 시에도 유지

  3. 시스템 테마 감지

    • 초기 접속 시 사용자의 시스템 테마 설정을 확인하여 자동 적용

  4. HTML 클래스 조작

    • document.documentElement.classList를 통해 루트 요소의 클래스를 조작하여 Tailwind의 다크모드 활성화

마무리

Next.js + tailwindCSS라면.. 다크모드 적용하기 참 편리하다!