반응형
이번 포스팅에서는 [CSS 디자인 시스템] 파트의 세부 주제인 사용자 설정 감지 및 다크 모드 토글링에 대하여 상세히 알아보겠습니다.
1. OS 테마 자동 감지하기: prefers-color-scheme
운영체제(윈도우, 맥, 모바일 기기)가 다크 모드인지 라이트 모드인지 미디어 쿼리를 통해 자동으로 감지하여 초기 스타일을 맞춰줄 수 있습니다.
/* 기본 라이트 모드 변수 선언 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
/* 사용자가 기기를 다크 모드로 설정한 경우 덮어쓰기 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f1f1f1;
}
}2. 커스텀 테마 버튼으로 강제 제어하기
사이트 내에 해/달 버튼을 두어 사용자가 임의로 모드를 바꿀 수 있게 하려면, <body>나 <html> 태그에 data-theme="dark" 속성을 추가/제거하는 방식을 씁니다.
/* 자바스크립트로 html 태그에 data-theme="dark"가 붙었을 때 변수 교체 */
[data-theme="dark"] {
--bg-color: #1a202c;
--text-color: #e2e8f0;
--border-color: #4a5568;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}지금까지 다크 모드 감지와 데이터 속성(data attribute)을 이용한 테마 스위칭에 대해 살펴보았습니다. 모든 색상을 하드코딩하지 말고 반드시 CSS 변수를 거치도록 설계하세요.
반응형
'StyleSheet > CSS' 카테고리의 다른 글
| [CSS] 크로스 브라우징과 벤더 프리픽스 (Vendor Prefix) (0) | 2026.07.20 |
|---|---|
| [CSS] 스크롤 스냅(Scroll Snap)과 부드러운 스크롤 (0) | 2026.07.20 |
| [CSS] 반응형 이미지와 종횡비(Aspect-ratio) 유지하기 (0) | 2026.07.20 |
| [CSS] z-index가 안 먹히는 이유와 Stacking Context (0) | 2026.07.20 |
| [CSS] 트랜스폼(Transform) 2D/3D 변형 기술 (0) | 2026.07.20 |
