JavaScript로 다크모드(Dark Mode) 쉽게 구현하는 방법

다크모드가 필요한 이유

• 눈의 피로 감소 : 어두운 화면은 장시간 사용 시, 밝은화면에 비해 눈이 덜 피곤함
• 배터리 절약 : OLED 디스플레이에서는 검은색 픽셀이 전력 소모를 줄임
• 개인화된 사용자 경험 제공

---

다크모드 적용 방법

 

1️⃣ CSS 변수 (Custom Properties) 활용

CSS 변수를 사용하면 테마 변경이 매우 간단해집니다.

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

.dark-mode {
  --bg-color: #222222;
  --text-color: #ffffff;
}

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

 

2️⃣ JavaScript로 다크모드 토글 기능 구현

const toggleButton = document.querySelector("#darkModeToggle");

toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  // 사용자 설정을 localStorage에 저장
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

// 페이지 로드 시 저장된 테마 적용
window.onload = () => {
  if (localStorage.getItem("theme") === "dark") {
    document.body.classList.add("dark-mode");
  }
};

 

3️⃣ HTML 버튼 추가

<button id="darkModeToggle">🌙 다크모드 전환</button>

 

4️⃣ 사용자의 시스템 설정에 따라 자동 적용

CSS prefers-color-scheme 를 활용하면 사용자의 운영체제에 따라 다크모드 설정을 반영할 수 있습니다.

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #222222;
    --text-color: #ffffff;
  }
}

 

이렇게 간단하고 손쉽게 다크모드를 적용해보세요!