■ 라이센스
MIT 라이센스
■ 상세 설명
Day/Nite는 웹사이트에서 라이트 모드와 다크 모드를 손쉽게 전환할 수 있도록 구현된 UI 컴포넌트이다.
사용자의 환경 설정이나 직접 선택에 따라 테마를 변경할 수 있으며, CSS와 JavaScript를 조합하여 비교적 간단하게 적용할 수 있다.
일반적으로 다크모드는 어두운 배경과 밝은 텍스트를 사용하여 눈의 피로를 줄이고 가독성을 높이기 위한 UI 방식이다.
이 예제는 다음과 같은 방식으로 동작한다.
- 토글 버튼 클릭 시 라이트 / 다크 모드 전환
- CSS 클래스 또는 데이터 속성 변경을 통해 테마 적용
- 필요 시 localStorage를 활용하여 사용자 선택 상태 유지
또한 CSS의 prefers-color-scheme 미디어 쿼리를 활용하면
사용자의 운영체제 설정(다크/라이트)에 맞춰 자동 적용도 가능하다.
구현 구조는 크게 다음과 같다.
HTML
- 토글 버튼 또는 스위치 UI 구성
CSS
- 라이트 / 다크 테마 스타일 정의
- 변수 또는 클래스 기반 스타일 분기 처리
JavaScript
- 클릭 이벤트로 테마 전환
- 선택 상태 저장 및 복원 처리
■ 주요 특징
다크모드 / 라이트모드 전환 지원
간단한 구조로 빠른 적용 가능
사용자 설정 저장(localStorage) 가능
시스템 테마 자동 감지 가능
■ 활용 포인트
관리자 페이지 UI 개선
사용자 편의성 향상 (야간 모드 지원)
최신 웹 트렌드 대응
디자인 테마 확장성 확보
■ 사용 기술
HTML
CSS (prefers-color-scheme, 변수)
JavaScript
■ 추천 사용 환경
홈페이지 및 쇼핑몰
관리자 페이지
SaaS / 웹솔루션 UI
콘텐츠 사이트
■ 참고사항
데모사이트에서 다운로드 받은 파일은 npm 환경에서만 구동됩니다.
본 글에 첨부된 파일을 다운로드 받으면 examples/test.html 파일이 있습니다.
해당 파일은 vanilla js 로 구성된 파일이므로 브라우저에서 바로 실행해 볼 수 있습니다.
|
