사용자 설정에 따른 라이트/다크 모드 설정 방법!

많은 웹사이트에는 헤더에 사용자가 밝은 모드와 어두운 모드 사이를 전환할 수 있는 토글이 있습니다. 이것은 훌륭한 기능이지만 운영 체제 설정에서 이미 기본 설정을 지정했을 가능성이 있습니다. 귀하의 웹 사이트가 설정에 따라 단순히 반응한다면 좋지 않을까요?

이것은 CSS의 prefers-color-scheme 미디어 쿼리로 가능합니다!

prefers-color-scheme은 어떻게 작동합니까?

prefers-color-scheme는 다른 @media 쿼리와 똑같이 작동합니다.

기본적인 예:

@media (prefers-color-scheme: light) {
  body{
      /* Set the background to white and text to black */
      background: white;
      color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body{
      /* Set the background to black and text to white */
      background: black;
      color: white;
  }
}

마찬가지로 귀하의 웹사이트는 사용자의 기본 설정 변경에 반응합니다.

라이브 데모의 경우 see this example on CodePen . 운영 체제 기본 설정을 밝은 모드에서 어두운 모드로 또는 그 반대로 설정하고 동적으로 변하는 색상을 확인하세요!

모범 사례

위의 코드 예제에서는 light 에서 dark 및 prefers-color-scheme 를 모두 사용할 수 있는 방법을 보여 주었습니다. 그러나 일부 운영 체제는 색 구성표를 지원하지 않거나 일부 이전 브라우저는 지원하지 않습니다prefers-color-scheme. 이에 대한 해결책은 prefers-color-scheme 없이 기본 색상을 설정하고 나중에 대체 색상 구성표를 설정하는 것입니다.

예를 들어:

/* The light mode is set as default here without the `prefers-color-scheme` query.
This will be set if the query isn't supported for whatever reason. */

body{
    background: white;
    color: black;
}

/* This will be taken into account only if colour scheme preference is supported by the operating system or browser.
It will set the page to dark if the colour preference is set to dark. */
@media (prefers-color-scheme: dark) {
  body{
      background: black;
      color: white;
  }
}