다크모드/라이트모드 상태 얻어오기

프로젝트에서 라이트/다크모드 감지하는 방식

1. 시스템이 라이트/다크모드인지 확인하기
2. 사용자 계정에서 수동적으로 설정되어있는 모드를 확인하기

시스템이 라이트/다크모드인지 확인하기

prefers-color-scheme

• 위 속성은 사용자의 시스템이 light/dark 모드인지 탐색할때 사용한다.
• 즉, 사용자의 OS가 사용하는 테마를 감지하는것이다.
• 속성값을 보면
  • no-preference : 사용자가 시스템에 선호하는 테마를 알리지않음
  • light : 사용자가 시스템에 라이트테마를 적용하는것을 선호한다고 알림
  • dark : 사용자가 시스템에 다크테마를 적용하는것을 선호한다고 알림

그래서 css파일에서 아래처럼 사용할 수 있다.

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

js에서 시스템 light/dark 모드 감지하는방법

window.matchMedia()

이 메서드는 인자로 주어진 미디어 쿼리 문자열의 분석결과를 반환한다.

const isBrowserDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
  .matches
let initTheme = isBrowserDarkMode ? 'dark' : 'light'

사용자 계정에서 수동적으로 설정되어있는 모드를 확인하기

만약 위의 로직을 실행해서 시스템의 모드상태를 알게되더라도, 사용자가 계정설정을 통해 모드를 설정했다면 그 값이 우선적으로 적용되야한다.

아마 사용자가 본인의 계정에서 모드를 설정했다면, 그 값은 회원의 개인정보를 get해올때 받아와질것이고, 그 값을 아래 코드의 localStorage.getItem('theme') 부분에 설정해주면 될것이다.

const localSettingTheme = localStorage.getItem('theme')

if (localSettingTheme) {
  initTheme = localSettingTheme
}