[해피CGI][cgimall] 부드러운 다크/라이트 모드 전환 라이브러리 - DayniteJS

 ■ 라이센스

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 로 구성된 파일이므로 브라우저에서 바로 실행해 볼 수 있습니다.