🌗 운영체제 테마에 따라 자동으로 변하는 웹 UI – prefers-color-scheme 활용 가이드

 

 

다크 모드 토글 기능은

사용자 맞춤 UX의 시작점입니다.

 

하지만 사용자가 별도의 설정 없이도

운영체제의 테마에 맞춰 웹사이트가 자연스럽게 반응한다면

훨씬 더 직관적인 경험을 제공할 수 있습니다.

 

바로 여기서 시스템 테마 감지 기능이 등장합니다.

 

이번 포스트에서는

prefers-color-scheme 미디어 쿼리를 활용하여

운영체제의 라이트/다크 설정을 자동으로 감지하고,

 

이를 사용자 설정과 조합해

자연스럽게 전환하는 로직을

구현해볼 거예요.

 

✅ 구현 목표

• OS의 라이트/다크 모드 상태 감지
• 사용자 설정과 시스템 설정의 우선순위 처리
• CSS 변수와 data-theme 속성을 활용한 스타일 변경
• 로컬 스토리지 저장을 통한 사용자 커스터마이징

 

🧠 CSS에서 시스템 테마 감지하기

 

운영체제가 다크 모드로 설정되어 있을 때를 감지하려면 prefers-color-scheme을 사용하면 됩니다:

 

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #ffffff;
    --text-color: #000000;
  }
}

 

💡 이 방식은 JS 없이도 기본 스타일을 자동으로 적용할 수 있어

초기 로딩에서 부드러운 사용자 경험을 유도합니다.

 

⚙️ JavaScript로 사용자 설정과 시스템 설정을 병합하기

 

기본 CSS에 더해, JavaScript를 통해 로컬 설정을 우선 적용하고,

없을 경우 시스템 테마를 감지하여 적용하는 방식이 UX적으로 더 자연스럽습니다.

 

window.addEventListener("DOMContentLoaded", () => {
  const toggle = document.getElementById("toggle");
  const savedTheme = localStorage.getItem("theme");

  if (savedTheme) {
    document.documentElement.setAttribute("data-theme", savedTheme);
    toggle.checked = savedTheme === "dark";
  } else {
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const theme = prefersDark ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", theme);
    toggle.checked = prefersDark;
  }
});

• ✅ 사용자 설정이 우선
• ✅ 설정이 없을 경우 시스템 테마 반영

 

🧩 확장 포인트

• 아이콘도 함께 전환: 🌞 → 🌚
• 전환 시 fade 애니메이션 추가로 부드러운 UX
• matchMedia에 변화 감지 이벤트를 달아 실시간으로 테마 변경 감지 가능

window.matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", e => {
    if (!localStorage.getItem("theme")) {
      const newTheme = e.matches ? "dark" : "light";
      document.documentElement.setAttribute("data-theme", newTheme);
      toggle.checked = e.matches;
    }
  });

 

🧵 마무리하며

 

사용자 중심 웹 UI 개발의 핵심은 선택지를 주되,

자동화된 배려를 담는 것입니다.

 

시스템 테마 감지 기능은

작은 기능처럼 보일 수 있지만,

사용자 만족도와 기술적 완성도를 높이는

결정적인 요소가 됩니다.

 

다음 포스트에서는

사용자의 테마 설정 변경을

시각적으로 어떻게 더 매끄럽게 표현할 수 있을지에 대해

다뤄볼 예정입니다.

 

UI Code Lab에서

더 똑똑한 프런트엔드 인터랙션을 함께

고민해봐요! 🧪