다크 모드를 사용한 CSS 테마 전환 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자 (중간 난이도)
핵심 요약
- CSS 변수(
--bg-color
,--text-color
)를 사용해 테마 색상 정의 - JavaScript로
dark-mode
클래스 토글하여 테마 전환 - transition 속성으로 색상 전환 시 부드러운 효과 적용
섹션별 세부 요약
1. HTML 구조
button
요소를 사용해 테마 전환 버튼 생성id="theme-toggle"
속성으로 JavaScript와 연결
2. CSS 구현
:root
에서 기본 색상 변수 정의 (--bg-color
,--text-color
).dark-mode
클래스로 어두운 모드 색상(#121212
,#e0e0e0
) 재정의transition
속성으로 배경색/글자색 전환 시 0.3초 지연 적용
3. JavaScript 로직
getElementById("theme-toggle")
로 버튼 요소 선택click
이벤트 리스너 등록하여dark-mode
클래스 토글classList.toggle("dark-mode")
로 테마 상태 전환
결론
- CSS 변수를 활용한 테마 관리로 유지보수가 용이하며, transition 효과를 통해 사용자 경험 향상
- 브라우저 호환성 검증 및 야간 사용 시 눈의 피로도 감소 효과를 고려해 적용 권장