[CSS] 페이지를 OS의 설정에 따라 다크/라이트 모드로 보여주기

CSS의 @media속성인 prefers-color-scheme을 소개하고 CSS의 변수를 활용하여 색상표를 만드는 방법을 알아봅니다.

추가 정보가 필요하다면 모질라재단의 prefers-color-scheme 속성에 대한 설명을 참고하세요.

컴퓨터나 스마트폰을 사용할 때 다른 앱은 어두운 테마를 사용하는데 웹페이지가 밝거나 하면 번갈아서 볼 때 눈이 피로해질겁니다. 웹페이지도 다른 앱들과 같은 테마를 사용하고자 할 때 쓸 수 있는 방법이 미디어 속성 prefers-color-scheme 입니다.

라이트 / 다크 모드의 기준

윈도우 11의 경우에는 개인설정 > 색 항목에서 모드를 변경할 수 있습니다. 안드로이드는 기종마다 차이가 있지만 일단은 설정 메뉴 어딘가에서 변경할 수 있는 모양입니다.

기본적인 사용법

/* OS 다크/라이트 테마 */
@media (prefers-color-scheme: light) {
  /* 라이트 모드 */
}
@media (prefers-color-scheme: dark) {
  /* 다크 모드 */
}

@media 속성에 light나 dark를 넣어 조건식을 만들 수 있습니다. 다른 미디어 쿼리문과 마찬가지로 이 속성도 and나 not을 조합하여 사용할 수도 있습니다.

일반적인 사용법

/* 색상표 */
:root {
    --color: #000;
    --background: #FFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #DDD;
    --backgorund: #000;
  }
}

/* 본문 */
#container {
  background: var(--background);
  color: var(--color);
}

이렇게 조건에 따른 색상표를 만들어 OS에서 설정한 색상 테마에 맞춰서 사용할 수 있습니다.