Tailwind v4와 next-themes를 활용한 다크 모드

Source: Dev.to

Installation

npm install next-themes

Setup in main.jsx

import { ThemeProvider } from "next-themes";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(
  
  
    
  
  
);

Provider Props

Tailwind CSS Configuration

@import "tailwindcss";

/* Enable dark variant */
@variant dark (&:is(.dark *));

/* Define custom color tokens */
@theme {
  --color-primary: light-dark(#10b981, #dc2626);
  --color-surface: light-dark(#f8fafc, #0f172a);
}

Syntax for color tokens

--color-[name]: light-dark([light-color], [dark-color]);

Example

--color-primary: light-dark(#10b981, #dc2626);

Using the Tokens in JSX

Hello

Content

Note: 변수 이름에 text- 또는 bg-를 포함하지 마세요; Tailwind가 해당 접두사를 자동으로 추가합니다.

Theme Toggle Component

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

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

  // Prevent mismatched SSR rendering
  useEffect(() => setMounted(true), []);

  if (!mounted) return null;

  return (
     setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme
    
  );
}

A minimal version without the mount guard:

import { useTheme } from "next-themes";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
     setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? "🌙" : "☀️"}
    
  );
}

useTheme API Reference

const { theme, setTheme, systemTheme, themes } = useTheme();

Extended Color Tokens

@theme {
  /* Backgrounds */
  --color-surface: light-dark(#f8fafc, #0f172a);
  --color-card: light-dark(#ffffff, #1e293b);

  /* Text */
  --color-primary: light-dark(#1f2937, #f9fafb);
  --color-secondary: light-dark(#6b7280, #9ca3af);

  /* Brand */
  --color-brand: light-dark(#10b981, #34d399);
  --color-accent: light-dark(#3b82f6, #60a5fa);
}

Troubleshooting

• Dark mode not activating

  • DevTools에서 “ 가 나타나는지 확인하세요.
  • localStorage 를 비우고 페이지를 새로 고칩니다.
  • 컴파일된 CSS에 @variant dark (&:is(.dark *)); 규칙이 포함되어 있는지 확인하세요.

• Colors not changing

  • 사용자 정의 색상 변수 이름에 text- 또는 bg-를 포함하지 마세요.
  • 올바른 light-dark 구문을 사용하세요. 예: light-dark(#fff, #000).

Quick Reference

// Setup

// Toggle theme
const { theme, setTheme } = useTheme();
setTheme(theme === "dark" ? "light" : "dark");

// Define colors
--color-primary: light-dark(#10b981, #dc2626);

// Use colors
…

Links

• next-themes GitHub
• Tailwind CSS v4 Documentation