다크모드 UI 패키지
다크모드 UI 적용
Notice
문의 시 프로젝트명을 알려주시면 빠른 상담이 가능합니다.
디자인 상세정보
◆ 개요
기존 웹사이트에 다크모드 UI를 적용하는 패키지 서비스입니다. 시스템 설정·사용자 선택에 따라 라이트/다크 테마를 전환하고, 가독성과 접근성을 유지합니다.
📌 작업 내용
1. 컬러 변수: CSS 변수로 라이트/다크 팔레트 정의
2. 전환 로직: prefers-color-scheme·토글 버튼
3. 컴포넌트: 버튼·카드·폼·테이블 다크 스타일
4. 대비·가독성: WCAG 대비율 검사
5. 저장: 사용자 선택 로컬 저장
✓ 이미지·SVG 대응
● 점진적 적용·롤백 가능
🎯 활용: 눈 피로 감소·선호도 반영
기존 웹사이트에 다크모드 UI를 적용하는 패키지 서비스입니다. 시스템 설정·사용자 선택에 따라 라이트/다크 테마를 전환하고, 가독성과 접근성을 유지합니다.
📌 작업 내용
1. 컬러 변수: CSS 변수로 라이트/다크 팔레트 정의
2. 전환 로직: prefers-color-scheme·토글 버튼
3. 컴포넌트: 버튼·카드·폼·테이블 다크 스타일
4. 대비·가독성: WCAG 대비율 검사
5. 저장: 사용자 선택 로컬 저장
✓ 이미지·SVG 대응
● 점진적 적용·롤백 가능
🎯 활용: 눈 피로 감소·선호도 반영
기술 스택
CSS3
JavaScript