다크 모드(Dark Mode) 구현하는 다양한 방법

1. 개요

다크 모드(Dark Mode)는 밝은 색상 대신 어두운 색상을 기본 테마로 적용하는 기능으로, 사용자 경험(UX)을 개선하는 중요한 요소 중 하나이다. 특히 눈의 피로를 줄이고, OLED 디스플레이에서 배터리 소모를 줄이는 장점이 있다.

많은 웹사이트와 애플리케이션이 다크 모드를 지원하면서, 이를 효과적으로 구현하는 방법에 대한 관심이 높아지고 있다. 다크 모드를 적용하는 방법은 CSS를 활용한 간단한 스타일 변경부터, JavaScript, 시스템 설정 연동, 사용자 저장 설정 유지 등 다양한 방식이 있다.

이 글에서는 다크 모드를 구현하는 다양한 방법과 각각의 장단점을 살펴보겠다.

---

2. CSS만 활용한 다크 모드 구현

✅ 방법 개요

• CSS에서 prefers-color-scheme 미디어 쿼리를 사용하여 다크 모드를 자동 적용할 수 있다.
• 브라우저 또는 OS 설정이 다크 모드일 경우 자동으로 반영된다.

✅ 코드 예제

/* 기본 라이트 모드 스타일 */
body {
  background-color: white;
  color: black;
}

/* 다크 모드 스타일 적용 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

✅ 장점

• 간단한 구현 (별도의 JavaScript 코드 필요 없음)
• 브라우저 및 운영체제 설정 자동 반영

✅ 단점

• 사용자가 원하는 테마를 직접 변경할 수 없음
• 로컬 저장 기능이 없어, 사용자가 설정을 바꿀 경우 저장되지 않음

 

---

3. JavaScript를 활용한 다크 모드 토글 기능

✅ 방법 개요

• 사용자가 버튼을 눌러 다크 모드를 켜고 끌 수 있도록 한다.
• JavaScript로 data-theme 속성을 변경하여 다크 모드를 적용한다.

✅ 코드 예제

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

<script>
  document.getElementById('toggle-theme').addEventListener('click', function () {
    document.body.classList.toggle('dark-mode');
  });
</script>

<style>
  body.dark-mode {
    background-color: black;
    color: white;
  }
</style>

✅ 장점

• 사용자가 직접 다크 모드를 선택할 수 있음
• CSS만 사용한 방법보다 유연한 기능 제공

✅ 단점

• 사용자의 설정을 유지하지 못함 (페이지를 새로고침하면 설정이 초기화됨)

---

4. 로컬 스토리지(LocalStorage)를 활용한 다크 모드 유지

✅ 방법 개요

• 사용자가 설정한 다크 모드를 브라우저 로컬 스토리지(localStorage) 에 저장하여 유지한다.
• 페이지를 새로고침하거나 다시 방문해도 이전 설정이 유지됨.

✅ 코드 예제

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

<script>
  const body = document.body;
  const themeButton = document.getElementById('toggle-theme');

  // 이전에 저장된 테마 확인
  if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
  }

  themeButton.addEventListener('click', function () {
    body.classList.toggle('dark-mode');
    
    // 현재 테마 저장
    if (body.classList.contains('dark-mode')) {
      localStorage.setItem('theme', 'dark');
    } else {
      localStorage.setItem('theme', 'light');
    }
  });
</script>

<style>
  body.dark-mode {
    background-color: black;
    color: white;
  }
</style>

✅ 장점

• 사용자의 설정이 유지됨 (새로고침, 재방문 시에도 적용)
• 브라우저 설정과 관계없이 개별 설정 가능

✅ 단점

• JavaScript가 비활성화된 경우 동작하지 않음

---

5. CSS 변수(CSS Custom Properties) 활용

✅ 방법 개요

• CSS 변수(--변수명)를 사용하여 테마 색상을 지정하고 JavaScript로 동적으로 변경한다.
• 유지보수가 용이하며, 다크 모드를 포함한 다양한 테마 확장이 가능하다.

✅ 코드 예제

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

<script>
  const root = document.documentElement;
  const themeButton = document.getElementById('toggle-theme');

  // 저장된 테마 불러오기
  if (localStorage.getItem('theme') === 'dark') {
    root.setAttribute('data-theme', 'dark');
  }

  themeButton.addEventListener('click', function () {
    if (root.getAttribute('data-theme') === 'dark') {
      root.setAttribute('data-theme', 'light');
      localStorage.setItem('theme', 'light');
    } else {
      root.setAttribute('data-theme', 'dark');
      localStorage.setItem('theme', 'dark');
    }
  });
</script>

<style>
  :root {
    --background-color: white;
    --text-color: black;
  }

  [data-theme="dark"] {
    --background-color: black;
    --text-color: white;
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
</style>

✅ 장점

• 다양한 테마를 확장 가능
• CSS만 수정하면 스타일 변경이 가능하므로 유지보수 용이

✅ 단점

• CSS 변수 지원이 없는 구형 브라우저에서는 적용되지 않을 수 있음

---

6. 결론

다크 모드는 사용자 경험을 향상시키는 중요한 기능이며, 다양한 방법으로 구현할 수 있다.

✅ 다크 모드 구현 방법 비교

방법	장점	단점
CSS prefers-color-scheme	OS 설정과 자동 연동, 간단한 구현	사용자 설정 저장 불가능
JavaScript 토글	사용자가 직접 변경 가능	설정 유지 불가능
로컬 스토리지 활용	설정 저장 가능, 사용자 맞춤 기능 제공	JavaScript 필요
CSS 변수 활용	유지보수 용이, 다크 모드 외 다양한 테마 확장 가능	구형 브라우저 지원 제한

웹사이트의 목적과 사용자 요구에 따라 가장 적절한 방법을 선택하면 된다.