Detect Dark mode in CSS & Javascript

September 09, 2020

Photo by Florian Krumm on Unsplash

Dark Mode

How do I detect dark mode using JavaScript & CSS

다크모드 시스템은 모든 화면, 컴포넌트, 메뉴 및 컨트롤에 대해 더 어두운 색상 팔레트를 사용하고 더 선명한 배경을 사용하여 전경 콘텐츠를 돋보이게 만든다.

몇몇 서비스에서는 다크모드를 지원하는 UI를 사용자에게 제공하고 있다.

장점

눈의 피로를 줄이고, 밝기를 현재 조명 조건에 맞게 조정
어두운 환경에서 화면을 쉽게 사용할 수 있도록 지원
배터리 전원을 절약함으로써 시각적 인체 공학을 개선하는 데 도움

접근성 및 대비

다크모드는 흰색 텍스트를 표시 할 수있을만큼 어두워야 한다. 텍스트와 배경 사이에 최소 15.8 : 1의 대비 수준을 사용한다. 이렇게하면 본문 텍스트가 WCAG의 AA 표준 인 4.5 : 1 이상을 통과할 수 있다.

다크모드는 구성 요소의 기본 색상으로 검은 색이 아닌 어두운 회색을 사용한다. 어두운 회색 배경은 검은 색 대신 회색에서 그림자를 보기가 더 쉽기 때문에 더 넓은 범위의 색상 및 깊이를 표현할 수 있다.

어두운 회색 표면의 밝은 텍스트는 검은 색 표면의 밝은 텍스트보다 대비가 적기 때문에 어두운 회색 표면도 눈의 피로를 줄여준다.

권장되는 어두운 테마 배경 색상은 #121212 이다.

효율적인 배터리 사용이 필요한 UI는 트루 블랙 #000, black 을 사용할 수 있다. 이러한 경우 일부 장치 (예 : OLED 화면이 있는 웨어러블)는 배터리 전원을 절약하기 위해 검정색으로 표시되는 모든 픽셀을 끌 수 있다.

CSS로 다크모드 처리하기

prefers-color-scheme 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 감지하기 위해 사용된다.

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

Chrome 76 ^
Safari 12.1 ^
IE : Not supported

디바이스 지원

iOS 13.0 ^
Android 10 (API 레벨 29) ^

Detect dark mode using JavaScript

javascript로 다크모드 감지하기

window.matchMedia("(prefers-color-scheme: dark)").addListener(e => {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
})

Dark/Light Switch Toggle Button

다크모드 토글 버튼으로 다크모드 대응하기

아이콘 토글을 사용하여 테마를 켜거나 끌 수 있는 기능을 제공할 수 있다.

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
  <em>Enable Dark Mode!</em>
</div>

const toggleSwitch = document.querySelector(
  '.theme-switch input[type="checkbox"]'
)

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark")
  } else {
    document.documentElement.setAttribute("data-theme", "light")
  }
}

toggleSwitch.addEventListener("change", switchTheme, false)

Reference

Blog Posts

DailyLog