Javascript - 다크모드/라이트모드

다크모드 / 라이트모드 구현 방법

최근에는 사용자 기기의 다크/라이트 테마 설정 값을 따라 웹 테마도 자동으로 변경되는 경우가 많아요.
예를 들어 유튜브도 시스템 설정에 따라 테마가 바뀌는 대표적인 예시입니다.

---

1. CSS에서 테마 컨트롤하기

prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 시스템 설정에 따라 다크 모드인지 라이트 모드인지 자동으로 판단할 수 있습니다. 이를 활용해 조건부 스타일을 적용할 수 있어요.

코드 예시

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

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

팁: 최신 브라우저가 아닌 경우에는 prefers-color-scheme를 지원하지 않을 수 있으므로, 라이트 모드를 기본 폴백 스타일로 작성하는 것이 좋아요.

---

2. JS (React & TypeScript)에서 테마 컨트롤하기

React와 TypeScript를 사용하면 window.matchMedia API를 활용해 시스템 테마를 감지하고,
상태 관리를 통해 다크/라이트 모드를 적용할 수 있어요.

구현 방법

1. window.matchMedia API를 사용해 시스템 테마를 감지합니다.
2. React 상태 관리로 테마를 저장하고 업데이트합니다.
3. className 변경 등을 통해 스타일을 적용합니다.

코드 예시

import React, { useState, useEffect } from 'react';

const App = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const detectTheme = () => {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(prefersDark ? 'dark' : 'light');
  };

  useEffect(() => {
    detectTheme();
    // 시스템 테마 변경 이벤트 리스너 추가
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectTheme);
    return () => {
      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', detectTheme);
    };
  }, []);

  return (
    <div className={theme}>
      <h1>{theme === 'dark' ? '다크 모드' : '라이트 모드'}</h1>
    </div>
  );
};

export default App;

---

3. 시스템 테마 따라가기 vs 독립적인 테마 적용

시스템 테마를 따라가는 경우

• prefers-color-scheme 미디어 쿼리만 사용해 CSS로 간단하게 구현할 수 있습니다.

시스템 테마와 독립적인 컨트롤

• JS 상태 관리로 테마를 제어하며, 사용자 선택에 따라 다크/라이트 모드를 변경할 수 있어요.
• 이 경우, className 변경 등을 통해 스타일을 적용하면 됩니다.

// 사용자가 버튼을 클릭해 테마를 변경하는 예시
const toggleTheme = () => {
  setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
};