CSS로 라이트/다크 모드 구현하기
이 글은 Kelp UI 라이브러리에서 라이트/다크 색상 모드를 구현하는 방법을 설명합니다.
주요 구현 방식:
:root요소에 기본 라이트 테마용 CSS 변수들을 정의 (예:--color-primary-fill-muted,--color-background등).kelp-theme-dark클래스를 사용해 다크 모드용 색상 변수들을 재정의.kelp-theme-light클래스로 특정 영역만 라이트 모드로 오버라이드 가능
자동 모드 전환: 사용자의 OS 설정(prefers-color-scheme)을 감지하여 자동으로 테마를 전환하는 JavaScript 코드를 제공합니다. 이 코드는 시스템 설정 변경도 실시간으로 감지합니다.
장점:
- CSS 변수를 활용한 체계적인 색상 관리
- 페이지 내 부분적 테마 적용 가능
- 사용자 시스템 설정 자동 반영
Kelp 라이브러리는 최근 공식 출시되었으며, 향후 웹 컴포넌트와 커스터마이징 도구가 추가될 예정입니다.