shadcn/ui 다크 모드 + 멀티 브랜드 테마를 CSS 변수 하나로 관리하는 법

:root {
  /* Primitive — 실제 색상값 */
  --color-slate-950: oklch(0.145 0 0);
  --color-white: oklch(1 0 0);
 
  /* Semantic — Primitive를 역할에 매핑 */
  --background: var(--color-white);
  --foreground: var(--color-slate-950);
  --primary: var(--color-slate-950);
  --primary-foreground: var(--color-white);
  --card: var(--color-white);
  --card-foreground: var(--color-slate-950);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}
 
/* 다크 모드: 같은 Semantic 토큰 이름, 다른 값 */
.dark {
  --background: var(--color-slate-950);
  --foreground: var(--color-white);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --border: oklch(0.269 0 0);
}

/* HSL: 같은 채도(100%)지만 체감 밝기가 색조마다 다름 */
hsl(60 100% 50%)  /* 노랑 — 눈이 아플 만큼 밝음 */
hsl(240 100% 50%) /* 파랑 — 상대적으로 어둡게 보임 */
 
/* OKLCH: L 값이 실제 밝기와 일치 */
oklch(0.96 0.21 109) /* 노랑 계열 */
oklch(0.45 0.31 264) /* 파랑 계열 — L만 봐도 밝기 차이가 명확 */

@import "tailwindcss";
 
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-border: var(--border);
  --radius-lg: var(--radius);
}

/* globals.css */
 
@import "tailwindcss";
 
/* 1. Tailwind v4 테마 바인딩 — 반드시 가장 앞에 위치 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-border: var(--border);
  --radius-lg: var(--radius);
}
 
/* 2. 기본 라이트 테마 */
:root {
  /* Primitive */
  --color-slate-950: oklch(0.145 0 0);
  --color-white: oklch(1 0 0);
 
  /* Semantic → Primitive 참조 */
  --background: var(--color-white);
  --foreground: var(--color-slate-950);
  --primary: var(--color-slate-950);
  --primary-foreground: var(--color-white);
  --card: var(--color-white);
  --card-foreground: var(--color-slate-950);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}
 
/* 3. 기본 다크 테마 */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --card: oklch(0.205 0 0);       /* background보다 3~5% 밝게 해야 깊이감이 생깁니다 */
  --card-foreground: oklch(0.985 0 0);
  --border: oklch(0.269 0 0);
}
 
/* 4. 브랜드 테마 — 필요한 경우 이 아래에 추가 */
html[data-theme='brand-a'] {
  --background: oklch(0.98 0.005 280);
  --foreground: oklch(0.15 0.01 280);
  --primary: oklch(0.55 0.22 285);
  --primary-foreground: oklch(1 0 0);
  --card: oklch(0.96 0.008 280);
  --border: oklch(0.88 0.015 280);
}

// app/providers.tsx
import { ThemeProvider } from 'next-themes'
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

// components/theme-toggle.tsx
'use client'
 
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
 
export function ThemeToggle() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()
 
  useEffect(() => setMounted(true), [])
 
  // 마운트 전에는 렌더링하지 않아야 hydration 불일치를 피할 수 있습니다
  if (!mounted) return null
 
  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground"
    >
      {theme === 'dark' ? '라이트 모드' : '다크 모드'}
    </button>
  )
}

/* globals.css의 브랜드 테마 섹션 */
 
/* 브랜드 A — 보라 계열 */
html[data-theme='brand-a'] {
  --background: oklch(0.98 0.005 280);
  --foreground: oklch(0.15 0.01 280);
  --primary: oklch(0.55 0.22 285);
  --primary-foreground: oklch(1 0 0);
  --card: oklch(0.96 0.008 280);
  --border: oklch(0.88 0.015 280);
}
 
/* 브랜드 A 다크 */
html[data-theme='brand-a-dark'] {
  --background: oklch(0.15 0.01 285);
  --foreground: oklch(0.95 0.005 280);
  --primary: oklch(0.72 0.18 285);
  --primary-foreground: oklch(0.1 0 0);
  --card: oklch(0.2 0.015 285);   /* background보다 살짝 밝게 — 계층감이 살아납니다 */
  --border: oklch(0.32 0.02 285);
}

// app/providers.tsx — 멀티 테마 버전
import { ThemeProvider } from 'next-themes'
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      attribute="data-theme"
      themes={['light', 'dark', 'brand-a', 'brand-a-dark', 'brand-b', 'brand-b-dark']}
      defaultTheme="light"
    >
      {children}
    </ThemeProvider>
  )
}

// ❌ 하드코딩 — 다크 모드에서 흰 배경이 그대로 남음
function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-white text-gray-900 border border-gray-200 rounded-lg p-6">
      {children}
    </div>
  )
}
 
// ✅ 토큰 클래스만 사용 — 어떤 테마에서도 올바르게 동작
function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-card text-card-foreground border border-border rounded-lg p-6 shadow-sm">
      {children}
    </div>
  )
}

// 버튼도 같은 원칙
function PrimaryButton({ children, onClick }: {
  children: React.ReactNode
  onClick?: () => void
}) {
  return (
    <button
      onClick={onClick}
      className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
    >
      {children}
    </button>
  )
}