다크모드 제대로 구현하기: CSS 변수 설계부터 색 대비 검증까지

/* ❌ 이렇게 하면 안 됩니다 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

/* 라이트모드 기본값 */
:root {
  /* 배경 */
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f3f5;

  /* 텍스트 */
  --color-text: #1a1a2e;
  --color-text-subtle: #6c757d;
  --color-text-on-primary: #ffffff;

  /* 강조색 */
  --color-primary: #6366f1;       /* indigo */
  --color-primary-hover: #4f46e5;

  /* 시맨틱 색상 */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* 테두리 */
  --color-border: #dee2e6;
  --color-border-subtle: #f1f3f5;
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-bg-subtle: #1e293b;
    --color-surface: #1e293b;
    --color-surface-raised: #334155;

    --color-text: #e2e8f0;
    --color-text-subtle: #94a3b8;
    --color-text-on-primary: #ffffff;

    /* 다크모드에서 강조색은 밝게 조정 */
    --color-primary: #818cf8;       /* 더 밝은 indigo */
    --color-primary-hover: #a5b4fc;

    /* 시맨틱 색상도 배경에 맞게 조정 */
    --color-success: #4ade80;
    --color-warning: #fcd34d;
    --color-error: #f87171;

    --color-border: #334155;
    --color-border-subtle: #1e293b;
  }
}

/* 색상 값을 직접 쓰지 않음 */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* CSS만으로도 시스템 설정에 반응 가능 */
@media (prefers-color-scheme: dark) {
  :root { /* 다크모드 변수 */ }
}

:root {
  color-scheme: light dark;   /* 이 페이지는 두 모드를 다 지원한다고 브라우저에 알림 */
}

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

// 현재 설정 확인
console.log(prefersDark.matches); // true | false

// 변경 감지
prefersDark.addEventListener('change', (e) => {
  console.log(e.matches ? '다크모드로 전환' : '라이트모드로 전환');
});

const STORAGE_KEY = 'color-scheme';

function getStoredScheme() {
  return localStorage.getItem(STORAGE_KEY) || 'system';
}

function applyScheme(scheme) {
  const isDark =
    scheme === 'dark' ||
    (scheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);

  document.documentElement.setAttribute('data-color-scheme', isDark ? 'dark' : 'light');
}

function setScheme(scheme) {
  localStorage.setItem(STORAGE_KEY, scheme);
  applyScheme(scheme);
  updateToggleUI(scheme);
}

// 페이지 로드 시 적용 (버튼 상태도 현재 모드에 맞춰 동기화)
const initial = getStoredScheme();
applyScheme(initial);
updateToggleUI(initial);

// 버튼을 누르면 라이트 ↔ 다크를 오간다
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = getStoredScheme();
  const isDark = current === 'dark' ||
    (current === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
  setScheme(isDark ? 'light' : 'dark');   // 지금 다크면 라이트로, 아니면 다크로
});

/* ① 시스템이 다크이고, 사용자가 라이트로 끄지 않았을 때 */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    --color-bg: #0f172a;
    --color-text: #e2e8f0;
    /* …앞서 정의한 나머지 다크 토큰… */
  }
}

/* ② 사용자가 직접 다크를 켰을 때 (시스템과 무관) */
[data-color-scheme="dark"] {
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  /* …앞서 정의한 나머지 다크 토큰… */
}

<button
  id="theme-toggle"
  aria-label="다크모드 켜기"
  aria-pressed="false"
>
  🌙
</button>

function updateToggleUI(scheme) {
  const btn = document.getElementById('theme-toggle');
  const isDark = scheme === 'dark' ||
    (scheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);

  btn.setAttribute('aria-pressed', isDark ? 'true' : 'false');
  btn.setAttribute('aria-label', isDark ? '라이트모드로 전환' : '다크모드로 전환');
}

/* 다크모드에서 이미지 밝기 조금 낮춤 */
@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9) contrast(1.05);
  }
}

/* data-color-scheme 방식 */
[data-color-scheme="dark"] img:not([src$=".svg"]) {
  filter: brightness(0.9) contrast(1.05);
}

<picture>
  <source
    srcset="logo-dark.svg"
    media="(prefers-color-scheme: dark)"
  />
  <img src="logo-light.svg" alt="회사 로고" />
</picture>

<head>
  <!-- CSS 로드 전에 실행 -->
  <script>
    (function() {
      const scheme = localStorage.getItem('color-scheme') || 'system';
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const isDark = scheme === 'dark' || (scheme === 'system' && prefersDark);
      if (isDark) {
        document.documentElement.setAttribute('data-color-scheme', 'dark');
      }
    })();
  </script>
  <link rel="stylesheet" href="styles.css" />
</head>