블로그에 다크모드 적용하기 — next-themes로 UX 높이기

블로그를 만들면서 “다크모드 지원해야 할까?”라고 고민한 적 있나요?
요즘은 사용자들이 어두운 테마에 익숙해져 있고, 밤에 글을 읽는 비율도 높다 보니 다크모드는 필수가 되어가고 있어요.

이번 글에서는 next-themes를 사용해 Next.js 블로그에 다크모드를 손쉽게 적용하는 방법을 소개합니다.

---

🌟 1. next-themes란?

next-themes는 Next.js에서 다크모드와 라이트모드를 쉽게 토글할 수 있게 도와주는 라이브러리입니다.

• OS 설정 감지 가능
• 클래스 기반 테마 적용 방식
• SSR에서도 안정적으로 작동

---

📦 2. 설치하기

npm install next-themes

그 다음, _app.tsx에 ThemeProvider를 감싸줘야 합니다.

// pages/_app.tsx
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }: any) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
export default MyApp;

attribute="class"를 넣어주면, html 태그에 class="dark"가 붙는 방식으로 다크모드를 구현할 수 있어요.

---

🎨 3. Tailwind CSS 다크모드 설정

Tailwind를 사용 중이라면 tailwind.config.js에서 아래 설정을 추가해줘야 해요.

module.exports = {
  darkMode: 'class', // 'media'가 아닌 'class' 사용!
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

이제 아래처럼 dark: 접두어를 사용해 스타일을 분기할 수 있습니다:

<div className="bg-white text-black dark:bg-black dark:text-white">
  안녕하세요, 다크모드!
</div>

---

🌓 4. 테마 토글 버튼 만들기

사용자가 직접 테마를 변경할 수 있도록 useTheme 훅을 사용합니다.

// components/ThemeToggle.tsx
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  if (!mounted) return null; // hydration mismatch 방지

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="p-2 border rounded"
    >
      {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
    </button>
  );
}

이제 <ThemeToggle /> 컴포넌트를 어디든 넣으면 다크모드 토글이 됩니다!

---

✅ 마무리하며

다크모드는 단순히 “멋”의 문제가 아니라, UX의 핵심 요소로 자리잡고 있어요.
next-themes를 사용하면 정말 몇 줄의 코드만으로도 강력한 UX 향상을 이룰 수 있습니다.

“눈에 편한 UI가, 결국 마음에 편한 UX다.”