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..

웹사이트를 이용하는 환경이 다양해지면서, 이용자들은 밝고 화려한 인터페이스보다 눈에 편안한 어두운 테마를 선호하는 경우가 많아졌습니다. 특히 밤 시간이나 조명이 낮은 곳에서 접속할 경우, 화면이 지나치게 밝으면 시야에 부담을 줄 수 있기 때문이죠. 이번 글에서는 순수 자바스크립트(바닐라 JS)만으로 간단하면서도 직관적인 다크 모드 토글 기능을 만드는 방법을 안내합니다. 추가 라이브러리 없이 구현할 수 있고, 사용자 설정을 기억하는 기능까지 포함되어 있어 실무에도 충분히 적용할 수 있습니다. 🧱 HTML 구성 – 가장 단순한 시작먼저 테마 전환 버튼을 하나 추가해줍니다. 🌞 / 🌚 모드 전환 이 버튼은 라이트/다크 모드 전환을 담당하며, id 속성을 통해 스크립트에서 쉽게 접근할 수 있도록 설정합..