UI Code Lab

다크 모드 토글 기능은 사용자 맞춤 UX의 시작점입니다. 하지만 사용자가 별도의 설정 없이도 운영체제의 테마에 맞춰 웹사이트가 자연스럽게 반응한다면 훨씬 더 직관적인 경험을 제공할 수 있습니다. 바로 여기서 시스템 테마 감지 기능이 등장합니다. 이번 포스트에서는 prefers-color-scheme 미디어 쿼리를 활용하여 운영체제의 라이트/다크 설정을 자동으로 감지하고, 이를 사용자 설정과 조합해 자연스럽게 전환하는 로직을 구현해볼 거예요. ✅ 구현 목표OS의 라이트/다크 모드 상태 감지사용자 설정과 시스템 설정의 우선순위 처리CSS 변수와 data-theme 속성을 활용한 스타일 변경로컬 스토리지 저장을 통한 사용자 커스터마이징 🧠 CSS에서 시스템 테마 감지하기 운영체제가 다크 모드로 설정되어 ..

요즘 웹사이트를 보면 다크 모드 기능이 기본처럼 탑재되어 있죠. 눈의 피로를 줄이고, 사용자의 환경에 맞춰 테마를 바꿀 수 있는 다크 모드 토글 기능은 UX를 높이는 데 매우 효과적입니다. 이번 글에서는 라이브러리 없이 바닐라 JavaScript와 CSS 변수만으로 다크 모드 토글 기능을 구현하는 방법을 소개합니다. ✅ 구현 목표버튼 클릭 시 라이트 ↔ 다크 모드 전환CSS 변수(--color, --bg)를 활용한 테마 스타일링JavaScript로 data-theme 속성 제어로컬 스토리지에 사용자 테마 저장 🧱 HTML 구조 input[type="checkbox"]로 토글 기능 구현label과 span.slider로 스타일링 🎨 CSS 스타일 :root { --bg-color: #ffff..