Logo

CSS 미디어 쿼리 prefers-color-scheme (다크 모드)

다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다.

라이트 모드 스타일링

예전에는 웹사이트를 스타일할 때 전반적으로 밝은 배경색에 어두운 글자색을 사용하는 것이 일반적이 었습니다. 간단한 예제 웹사이트에 전형적인 스타일을 적용해보겠습니다.

body {
  background: #fff;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: #000;
}

p,
dl {
  color: #363636;
}

a {
  color: #0076d1;
  text-decoration: none;
}

code {
  color: #000;
  background: #efefef;
  border-radius: 6px;
  padding: 2.5px 5px;
}

이러한 라이트 모드(light mode) 스타일은 운영 체제가 다크 모드로 전환되었을 때 너무 밝아서 사용자의 눈을 찌푸리게 할 수 있습니다.

다크 모드 스타일링

이 번에는 같은 웹사이트를 일반적인 다크 모드(dark mode)로 스타일해보겠습니다. 반대로 어두운 배경색에 밝은 글자색을 사용합니다.

body {
  background: #202b38;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: #fff;
}

p,
dl {
  color: #dbdbdb;
}

a {
  color: #41adff;
  text-decoration: none;
}

code {
  color: #ffbe85;
  background: #161f27;
  border-radius: 6px;
  padding: 2.5px 5px;
}

이러한 다크 모드 스타일은 운영 체제가 다크 모드로 전환되었을 때도 편하게 웹사이트를 사용할 수 있습니다. 하지만 게임 사이트가 아닌 이상, 다크 모드를 염두해서 웹사이트를 항상 어둡게 스타일할 수는 없는 노릇입니다.

prefers-color-scheme 미디어 쿼리

prefers-color-scheme 미디어 쿼리를 사용하면 운영 체제에서 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 스타일을 적용할 수 있습니다! 🎉

@media (prefers-color-scheme: light) {
  /* 라이트 모드에 적용할 스타일 정의 */
}
@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용할 스타일 정의 */
}

위에서 작성한 두 가지 스타일을 라이트/다크 모드를 모두 지원할 수 있도록 하나로 통합해보도록 하겠습니다. 일반적으로 둘 중 하나의 모드를 우선으로 기본 스타일을 정의하고, 미디어 쿼리를 사용하여 나머지 모드에 대해서 스타일을 추가로 정의합니다.

body {
  background: #fff;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: #000;
}

p,
dl {
  color: #363636;
}

a {
  color: #0076d1;
  text-decoration: none;
}

code {
  color: #000;
  background: #efefef;
  border-radius: 6px;
  padding: 2.5px 5px;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #202b38;
  }

  h1,
  h2,
  h3 {
    color: #fff;
  }

  p,
  dl {
    color: #dbdbdb;
  }

  a {
    color: #41adff;
  }

  code {
    color: #ffbe85;
    background: #161f27;
  }
}

다크 모드에서 주로 색상만 달라지기 때문에 색상 관련 CSS 속성만 미디어 쿼리를 이용하여 스타일을 해주었습니다.

위 웹사이트를 테스트해보려면 본인의 운영 체제를 다크 모드로 설정해줘야 합니다. 저처럼 macOS를 사용하신다면 Mac에서 다크 모드를 사용하는 방법을 참고 바랍니다.

반응형 웹디자인의 근간이되는 CSS의 미디어 쿼리(Media Query)에 대해서는 별도 포스팅에서 자세히 다루고 있습니다.

CSS Variables 적용

웹사이트의 규모가 커지고 다크 모드를 지원하기 위한 스타일을 하기가 점점 어려워집니다. 일일이 모든 태그와 클래스에 어두운 배경색과 밝은 글자색을 적용하려면 미디어 쿼리의 양이 늘어나고 빠뜨리기도 쉽기 때문입니다.

규모가 있는 웹사이트에서는 CSS 변수(CSS variables, CSS custom properties)를 이용해서 좀 더 효과적으로 다크 모드 스타일을 할 수 있습니다.

:root {
  --background: #fff;
  --text: #363636;
  --heading-text: #000;
  --anchor-text: #0076d1;
  --code-background: #efefef;
  --code-text: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #202b38;
    --text: #dbdbdb;
    --heading-text: #fff;
    --anchor-text: #0076d1;
    --code-background: #161f27;
    --code-text: #ffbe85;
  }
}

body {
  background: var(--background);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  color: var(--heading-text);
}

p,
dl {
  color: var(--text);
}

a {
  color: var(--anchor-text);
  text-decoration: none;
}

code {
  color: var(--code-text);
  background: var(--code-background);
  border-radius: 6px;
  padding: 2.5px 5px;
}

CSS 일반 속성을 건드리지 않고, CSS 변수만 미디어쿼리를 이용하여 변경해주기 때문에 훨씬 간단하게 다크 모드 스타일이 가능해지며 유지보수도 쉬워집니다.

CSS 사용자 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서는 관련 포스팅을 참고 바랍니다.

마치면서

지금까지 prefers-color-scheme 미디어 쿼리를 사용하여 운영 체제에 설정된 다크 모드를 감지하여 웹사이트에 다른 스타일을 적용하는 방법에 대해서 알아보았습니다. 많은 사용자들이 운영 체제의 라이트/다크 모드가 일출/일몰 시간에 맞게 자동으로 전환되도록 설정을 해놓습니다. 다크 모드로 전환될 때 시스템 전반에 어두운 색생이 적용되는데 이에 적절히 반응하는 웹사이트를 만들 수 있다면 좀 더 나은 사용자 경험을 제공할 수 있을 것입니다.

prefers-color-scheme 미디어 쿼리에 대한 좀 더 자세한 내용은 관련 MDN 문서를 참고 바랍니다. 뷰포트의 너비에 따라 다른 스타일을 적용하기 위해서 사용되는 미디어 쿼리의 매우 기본적인 내용은 관련 포스팅을 참고 바랍니다.

This work is licensed under CC BY 4.0

messageCircle