다크모드 ✅ CSS 변수와 prefers-color-scheme

 

 

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.
스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠.

 

✅ 이번 포스팅에서는

• CSS 변수(:root)
• 미디어 쿼리(prefers-color-scheme)
• JS 토글 버튼

을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️

---

🧱 1. CSS 변수 기반 색상 시스템 만들기

 

:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --accent-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
a {
  color: var(--accent-color);
}

 

📌 장점

• 색상 교체가 단 1줄로 가능
• 다크모드뿐 아니라 다른 테마 확장도 용이

---

🌑 2. 다크모드 색상 변수 덮어쓰기

prefers-color-scheme은 사용자의 OS 테마 설정을 감지합니다.

 

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #eaeaea;
    --accent-color: #4dabf7;
  }
}

 

📌 자동 테마 전환 지원

• 사용자가 macOS / Windows / Android 에서 다크모드를 켜면
  → 웹사이트도 자동으로 어두운 테마로 변경!

---

💡 3. 사용자 토글 버튼으로 수동 전환하기

HTML:

 

<button id="theme-toggle">🌙 다크모드</button>

 

JS:

 

const btn = document.getElementById("theme-toggle");
btn.addEventListener("click", () => {
  const currentTheme = document.documentElement.dataset.theme;
  const newTheme = currentTheme === "dark" ? "light" : "dark";
  document.documentElement.dataset.theme = newTheme;
  localStorage.setItem("theme", newTheme);
});

 

CSS:

 

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #eaeaea;
  --accent-color: #4dabf7;
}

 

📌 localStorage로 사용자 설정 유지
→ 새로고침하거나 다음 방문 시에도 다크모드 유지됨 👏

---

🧭 4. 다크모드 전환 시 애니메이션 효과

 

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

 

📌 자연스러운 전환으로 UX 업그레이드 ✨

---

🎨 5. 실무 예시 – 다크모드 카드 UI

 

<div class="card">
  <h2>다크모드 카드</h2>
  <p>이 카드는 시스템 테마에 따라 자동으로 색이 바뀝니다.</p>
</div>

 

.card {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  padding: 20px;
}

 

📌 테마 색상이 자동 반영 → 별도 클래스 관리 불필요

---

⚡ 6. 실무 적용 팁

✅ CSS 변수 중심 설계 → 유지보수 쉬움
✅ prefers-color-scheme → OS 자동 감지
✅ localStorage + data-theme → 사용자 제어
✅ 전환 애니메이션 추가 → UX 부드럽게
✅ SVG 아이콘 색상은 currentColor로 설정

---

🧠 7. 자주 묻는 질문 (FAQ)

Q. 이미지나 로고는 다크모드에서 어떻게 바꾸나요?
👉 picture 태그 활용:

 

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <img src="logo-light.png" alt="Logo" />
</picture>

 

Q. prefers-color-scheme이 없는 구형 브라우저는?
👉 JS fallback (기본 테마 설정값으로 처리)

---

📝 마무리 정리

• CSS 변수 + prefers-color-scheme로 완전 자동 다크모드
• data-theme + localStorage로 사용자 제어
• UX를 부드럽게 하는 트랜지션 필수

💡 “다크모드는 선택이 아니라 기본값”
→ 테마 토글 버튼을 추가하면 브랜드 신뢰도도 함께 올라갑니다 🌙