[CSS] 🌓 다크모드 구현 방식 비교

ttining·2025년 4월 13일

`prefer-color-scheme` 🆚 `data-theme` 🆚 `class` 방식

1️⃣ CSS 미디어 쿼리 : `prefers-color-scheme`

prefers-color-scheme은 CSS 미디어 쿼리이다.
이는 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용된다.
사용자의 운영체제 설정(라이트 모드 또는 다크 모드)이나 사용자 에이전트 설정에서 선호하는 테마를 나타낼 수 있다.

✅ 장점
- 구현이 아주 간단하고 빠르다.
- 유저 설정 없이도 자동으로 시스템 테마를 감지해 반응한다.
- CSS만으로 처리 가능하다. (JS 없이도 가능)
⚠️ 단점
- 사용자 선택을 반영하기 어렵다. ('시스템 설정은 다크지만, 웹사이트는 라이트로 보고 싶어' 같은 경우는 불가능)
- 테마 토글 같은 동적 제어에는 부적합하다.
- 특정 시점에만 반응하고, JS로 제어하려면 추가 작업이 필요하다.

🎯 사용 예시

.box {
  background: #eee;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .box.dark-scheme {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  .box.light-scheme {
    background: white;
    color: #555;
  }
}

위와 같이 설정하면, 사용자 시스템이 다크 모드일 땐 어두운 스타일을,
라이트 모드일 땐 밝은 스타일을 자동으로 적용할 수 있다.

2️⃣ 속성 방식 : `data-theme="light"` / `data-theme="dark"`

data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와준다.
속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성이다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있다.

✅ 장점
- 확장성이 좋다. data-theme="sepia"처럼 다양한 테마도 손쉽게 구현할 수 있다.
- 선택자 특이성이 낮아서 스타일을 덮어쓰기 쉽고 깔끔하다.
- 코드에서 data- 속성은 용도가 명확하기 때문에 가독성이나 유지보수에 좋다.
⚠️ 단점
- 선택자가 길어져서 살짝 귀찮아질 수 있다.
- 오래된 브라우저(예: IE8 이하)에서 데이터 속성 관련 문제가 생길 수 있다. (요즘엔 별로 안 씀 😏)

🎯 사용 예시

<body data-theme="dark">

[data-theme="dark"] .box {
  background: #333;
  color: white;
}

3️⃣ 클래스 방식 : `.light-mode`, `.dark-mode`

다크 모드를 수동으로 토글하거나, 시스템 설정과 별개로 사용자 설정을 저장해서 적용하려면
<body> 태그에 테마 정보를 직접 부여하는 방법을 사용해야 한다.

✅ 장점
- 구현이 간단하고 직관적이다. 조건에 따라 클래스만 변경해주면 된다.
- CSS 우선순위 관리가 쉽다. BEM 스타일 같은 구조와도 잘 어울린다.
- 모든 브라우저에서 문제없이 동작하기 때문에 호환성 걱정이 없다.
⚠️ 단점
- 클래스명이 고정적이라 테마 확장에는 한계가 있다.
- 클래스 네이밍이 많아지면 다른 스타일 체계와 섞일 수 있다.

사용 예시

<body class="dark">

.dark .box {
  background: #333;
  color: white;
}

🌟 결론 : 어떤 방법이 더 좋은가?

클래스 방식도 좋지만, 확장성과 코드의 명확성을 생각하면 data-theme 방식이 좀 더 유리하다.
브라우저 지원도 이제 대부분 괜찮고, 향후 더 다양한 테마를 고려한다면 이쪽이 훨씬 유연하다.

📜 참고

ttining

내가 보려고 만든 벨로그 *'-'*

이전 포스트

[TypeScript] 제네릭

다음 포스트

[CSS] 🌓 다크모드 구현 방식 비교

`prefer-color-scheme` 🆚 `data-theme` 🆚 `class` 방식

1️⃣ CSS 미디어 쿼리 : `prefers-color-scheme`

2️⃣ 속성 방식 : `data-theme="light"` / `data-theme="dark"`

3️⃣ 클래스 방식 : `.light-mode`, `.dark-mode`

🌟 결론 : 어떤 방법이 더 좋은가?

📜 참고

[TypeScript] 제네릭

[JavaScript] 스코프(Scope)와 클로저(Closure)

0개의 댓글

[CSS] 🌓 다크모드 구현 방식 비교

prefer-color-scheme 🆚 data-theme 🆚 class 방식

1️⃣ CSS 미디어 쿼리 : prefers-color-scheme

2️⃣ 속성 방식 : data-theme="light" / data-theme="dark"

3️⃣ 클래스 방식 : .light-mode, .dark-mode

🌟 결론 : 어떤 방법이 더 좋은가?

📜 참고

[TypeScript] 제네릭

[JavaScript] 스코프(Scope)와 클로저(Closure)

0개의 댓글

`prefer-color-scheme` 🆚 `data-theme` 🆚 `class` 방식

1️⃣ CSS 미디어 쿼리 : `prefers-color-scheme`

2️⃣ 속성 방식 : `data-theme="light"` / `data-theme="dark"`

3️⃣ 클래스 방식 : `.light-mode`, `.dark-mode`