OS 다크모드 감지해서 CSS 적용하기 (feat.vue)

CSS media query

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

OS가 다크모드로 세팅되어있으면 @media (prefers-color-scheme: dark) 안 css가,¹
라이트모드라면 @media (prefers-color-scheme: light) 안 css가 적용된다.

Safari/Webkit 은 아래를 사용한다.

@media (prefers-dark-interface) { background: #000; }
@media (prefers-light-interface) { background: #fff; }

JS

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
    console.log(`dark mode!`);
}

위 코드를 보면 먼저 브라우저가 matchMedia를 지원하는지 체크하고, prefers-color-scheme: dark 라는 스트링이 있는지 매치시켜본다. 이런 스트링이 존재한다면 다크모드라는 걸 알 수 있다.²

matchMedia()는 MediaQueryList객체를 반환한다. 이 객체를 사용해서 현재 보여주고 있는 문서(document)가 media query 문자열을 매칭하는지 알 수 있다. ³ MediaQueryList 객체는 문서에 적용된 media query정보를 저장하고 있다. MediaQueryList객체는 부모 interface가 EventTarget이기 때문에, media query 상태가 변경되면 listener에 알려주는 기능도 담당한다. ⁴ 변경을 감지하고 액션을 취하고 싶다면 아래와 같이 사용한다.

// dark mode 변경 감지
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  const newColorScheme = e.matches ? "dark" : "light";
});

Vue3에서 OS,디바이스 다크모드 감지하기

위 JS 예제를 활용해서 Vue3에서 OS 다크모드를 감지해보자.

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';

const isDarkMode = ref(false);

onBeforeMount(() => {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    console.log(`dark mode`);
    isDarkMode.value = true; 
  }
})
</script>

<template>
  <div :class="isDarkMode? 'dark-mode' : 'light-mode'">
      <p>User Device in </p>
  </div>
</template>

References

1. mdn: prefers-color-scheme ↩

2. vue: reactivity fundamentals  ↩

3. mdn: matchMedia() ↩

4. mdn: MediaQueryList ↩