prefers-color-scheme 과 다크모드 적용 실무 팁

개요

다크 모드를 적용하다가 몇가지 시행착오를 겪었다. CSS 에서 @media (prefers-color-scheme: dark) 라는 부분에 대한 이해가 부족했기 때문이다.

prefers-color-scheme 란?

• 요즘은 OS 에서 선호하는 컬러 모드를 설정할 수 있고, 그 결과가 prefers-color-scheme 이다.
  • Mozilla CSS @Media prefers-color-scheme 공식문서 에서 자세한 내용을 볼 수 있다.
  • 나중에는 다른 컬러를 지원할지 모르겠지만, 현재는 light 와 dark 중 선택하는 하는 것만 존재한다.
• 이 부분은 개발자가 임의로 javascript 로 변경할 수 없는 부분이며, OS 에서 설정하는 곳이 있다.

처음 다크모드를 개발할 때 이 부분을 내가 자바스크립트로 수정하여 다크모드를 적용하는 것인줄 알고 한참을 헤맸다. 알고보니 자바스크립트로 수정할 수 있는 설정이 아니다.

HTML, CSS 코드 예제

<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

핵심

기본 테마를 생각해두고, 기본 테마에서 사용자가 light-scheme 혹은 dark-scheme 일 때 그에 맞는 특수한 색상을 적용하는 방식으로 적용했다.

라이트 모드(prefers-color-scheme: light) 일 때 결과

다크 모드(prefers-color-scheme: dark) 일 때 결과

실무 적용 팁

• 실무에서는 CSS custom properties (variables) 를 이용한다.
• @media (prefers-color-scheme: dark) 일 때, CSS 변수의 색상을 변경하는 방식으로 적용하면 깔끔하다.

css 코드 예제

@media (prefers-color-scheme: dark) .markdown-body {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
}

• 사이트를 디자인할 때, CSS 색상 코드를 직접 쓰지 않고 변수를 사용한다.
• 위처럼 변수에 따른 색상만 변경해주면 된다.

레퍼런스

Mozilla CSS @Media prefers-color-scheme 공식문서