@media 쿼리 알아보기 - prefers-color-scheme

이전에 알아보았던 미디어 쿼리 다음으로 prefers-color-scheme에 대해서 알아보려고 한다

처음 명칭만으로 보았을 때는 색상에 관련된 것인걸 추측할 수 있었지만 역시나 처음 보는 미디어 쿼리였고 정확히 어떤 역할을 하는 건지는 파악하지 못했다

prefers-color-scheme

역시 생각했던대로 prefers-color-scheme은 색상에 관련된 미디어 쿼리였다

이 미디어 쿼리는 사용자의 시스템의 테마에 따라서 스타일을 지정해 줄 수 있는 미디어 쿼리이다

prefers-color-scheme는 시스템의 테마가 밝은 테마인지 혹은 어두운 테마인지를 판별하여 웹사이트의 색상 테마를 변경할 수 있다

우리가 웹사이트를 사용하며 자주 접하는 dark모드와 light모드같은 색상 테마를 판별하기 때문에 사이트의 전체적인 테마 색상을 지정할 때 유용하게 사용할 수 있게 된다

해당 미디어 쿼리의 값은 역시나 light, dark를 가지고 있고 이 외에 하나 더 no-preference라는 값을 가지고 있다

각각의 값이 가지는 역할은

1. no-preference: 사용자가 색상 스키마에 대한 선호도를 표시하지 않았을 때를 의미한다
2. light: 사용자의 시스템이 밝은 색상 스키마를 사용하고 있을 때가 해당된다
3. dark: 사용자의 시스템이 다크모드의 어두운 색상 스키마를 사용하고 있을 때가 해당된다

@media (prefers-color-scheme: light) {
  /* 라이트모드 상태의 스타일을 지정 */
}

@media (prefers-color-scheme: dark) {
  /* 다크모드 상태의 스타일을 지정 */
}

위 예시처럼 사용자가 사용하고 있는 시스템 설정에 따라서 다른 스타일을 적용하게 된다

만약 사용자가 밝은 테마를 사용하고 있다면 @media (prefers-color-scheme: light)의 스타일이 적용되고 다크모드의 테마를 사용하고 있다면 @media (prefers-color-scheme: dark)의 스타일이 적용된다

사용 목적

먼저 다크모드가 생기게 된 이유를 알아야 하는데 다크모드를 지원하게 된 이유는 아래와 같다

1. 사용자 경험 개선: 사용자의 개인적인 선호나 현재 환경에 따라 밝은 테마와 어두운 테마를 전환할 수 있게 해 주므로 사용자 경험을 향상한다
   • 예를 들어 어두운 곳에서는 스마트폰의 밝기를 밝게 한다면 눈의 피로가 늘어나 어둡게 낮추는 것처럼 사용 환경이 어두울 경우에 어두운 테마를 사용하여 눈의 피로를 줄일 수 있다
2. 전력 소모 감소: 특히 OLED 또는 AMOLED 디스플레이를 사용하는 모바일 장치에서 어두운 테마를 사용하면 전력 소모를 크게 줄일 수 있는데 이는 픽셀이 검은색일 때 덜 밝기를 조절하기 때문이다
3. 시각적 장애를 가진 사용자의 접근성 개선: 일부 사용자는 밝은 색상이나 강렬한 빛을 피해야 하는 상황에서 어두운 테마를 선호하는 경우가 발생하는데 이들 사용자에게 어두운 테마를 제공하면 웹사이트의 접근성을 개선할 수 있다
4. 개인화: 사용자가 자신의 환경을 제어하고, 개인화하게 해 주므로 사용자 만족도를 높일 수 있다

이런 이유들로 인해 다크모드를 지원하게 되는데 다크모드를 지원하기 위한 스타일을 구성할 경우 웹사이트의 규모가 커짐에 따라 적용해야 하는 요소들도 많아지고 복잡해져 스타일을 지정하기가 어려워진다

이런 부분을 개선하기 위해 스타일 변수를 선언하고 prefers-color-scheme미디어 쿼리를 사용한다면 전체적인 테마 색상을 보다 쉽게 변경하고 적용할 수 있게 되는 이점이 있다

예제

:root {
    --text-color: #333333;
    --bg-color: #ffffff
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #ffffff;
        --bg-color: #333333;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

1. 위 코드에서는 :root에서 두 가지 CSS 변수 --text-color와 --bg-color를 선언하고 초기값을 설정한다
   • 기본적으로 텍스트 색상은 검은색(#333333), 배경색은 흰색(#ffffff)이다
2. @media (prefers-color-scheme: dark) 미디어 쿼리를 사용하여 운영 체제 색상 테마가 다크 모드일 때 CSS 변수의 값을 변경하게 된다
   • 이때 텍스트 색상은 흰색(#ffffff), 배경색은 검은색(#333333)으로 구성한다.
3. body에서는 이들 변수를 사용하여 배경색과 텍스트 색상을 설정합니다. 이렇게 함으로써 운영 체제의 색상 테마 설정에 따라 웹사이트의 색상 테마가 자동으로 변경됩니다.

이런 prefers-color-scheme와 CSS Variables를 통해 시스템 테마에 대한 색상을 지정하고 구성한다면 CSS속성의 값을 한 곳에서 선언하고 관리할 수 있어 유지보수가 용이해지고 테마 변경등에 유용하게 사용될 수 있다