🌙 다크 모드 토글 기능 만들기 – 바닐라 JS로 UX 향상시키기

 

 

 

요즘 웹사이트를 보면 다크 모드 기능이

기본처럼 탑재되어 있죠.

 

눈의 피로를 줄이고,

사용자의 환경에 맞춰 테마를 바꿀 수 있는

다크 모드 토글 기능은

UX를 높이는 데 매우 효과적입니다.

 

이번 글에서는

라이브러리 없이

바닐라 JavaScript와 CSS 변수만으로

다크 모드 토글 기능을 구현하는

방법을 소개합니다.

 

✅ 구현 목표

• 버튼 클릭 시 라이트 ↔ 다크 모드 전환
• CSS 변수(--color, --bg)를 활용한 테마 스타일링
• JavaScript로 data-theme 속성 제어
• 로컬 스토리지에 사용자 테마 저장

 

🧱 HTML 구조

 

<label class="theme-toggle">
  <input type="checkbox" id="toggle" />
  <span class="slider"></span>
</label>

• input[type="checkbox"]로 토글 기능 구현
• label과 span.slider로 스타일링

 

🎨 CSS 스타일

 

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

• :root에 기본 색상 정의
• data-theme="dark"일 때 변수 덮어쓰기

 

⚙️ JavaScript 로직

 

const toggle = document.getElementById("toggle");

toggle.addEventListener("change", () => {
  const isDark = toggle.checked;
  document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
  localStorage.setItem("theme", isDark ? "dark" : "light");
});

// 페이지 로드 시 저장된 테마 적용
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "light";
  document.documentElement.setAttribute("data-theme", savedTheme);
  toggle.checked = savedTheme === "dark";
});

• data-theme 속성으로 CSS 스타일 변경
• 로컬 스토리지로 사용자 설정 유지

 

💡 확장 아이디어

• 아이콘(🌞/🌙)을 함께 표시해 직관성 강화
• 시스템 테마 감지 (prefers-color-scheme)로 자동 적용
• 애니메이션 효과 추가로 부드러운 전환

 

🧾 마무리

 

다크 모드 토글 기능은 단순한 UI 요소지만,

사용자 만족도를 크게 높일 수 있는 요소입니다.

 

바닐라 JS만으로도 충분히 구현 가능하며,

CSS 변수와 로컬 스토리지를 활용하면

유지성과 확장성도 뛰어납니다.

 

다음 글에서는

시스템 테마 감지 기능을

추가하는 방법도 소개할 예정이에요.

 

기대해주세요! 😄