CSS로 다크모드 구현: prefers-color-scheme

요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원합니다. 애플이 공식 지원을 시작한 후 윈도우 10, 안드로이드, iOS 할 것 없이 많은 운영체제에서 지원하고 있는데요, 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가로 만들고 있습니다.

 

사용자 입장에서야 좋겠지만 개발자는 괴롭습니다. 앱이든 웹이든... 하나, 둘 슬금슬금 다크 모드의 디자인을 별도로 제공하기 시작했죠. 별로 하고 싶지 않지만... 상대적으로 구닥다리로 비칠 것 같은 불안감이 엄습합니다.

 

그나마 불행중 다행으로 CSS에서 운영체제의 모드에 따라서 쉽게(?)  라이트, 다크 모드에 따른 디자인을 구현할 수 있는 미디어 쿼리가 추가되었습니다. 바로 "prefers-color-scheme"이라는 것인데요, 이에 대해서 살펴보겠습니다.

 

목차

 

1. 다크모드란?

다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 어두운 색생 팔레트를 적용해주는 운영 체제의 기능입니다. 현재 대부분의 OS에서 지원을 하고 있으며 많은 앱과 웹사이트가 운영체제의 모드에 맞추어 어두운 계열의 스타일을 추가하고 있습니다.

 

 

네이버 앱의 라이트모드와 다크모드

 

호불호가 있긴 하지만, 시스템에 다크모드를 적용하고 안 하고는 사용자 마음이고 개발자는 일단 해당 디자인을 추가로 제공해야겠죠?

 

반응형

 

2. prefers-color-scheme

CSS 미디어 쿼리 중 "prefers-color-scheme"을 이용하면 시스템의 테마(라이트, 혹은 다크)에 따른 웹페이지 디자인을 제공할 수 있습니다. 즉, 사용자가 현재 시스템에 설정한 테마에 따라서 내 웹사이트의 컬러를 다르게 보여주는 것이죠.

 

prefers-color-scheme의 옵션은 다음과 같습니다.

 

파라미터	설명
light	사용자가 라이트 테마를 사용하는 것을 선호한다고 알렸거나 선호도를 표시하지 않은 경우를 나타냄
dark	사용자가 다크 테마를 사용하는 것을 선호한다고 알린 경우를 나타냄

※ no-preference라는 것이 있었으나 현재는 deprecated 상태인 듯합니다.

 

사용법은 그다지 어렵지는 않습니다. prefers-color-sheme은 아래와 같이 간단한 형식으로 사용할 수 있습니다.

 

@media (prefers-color-scheme: dark) {
  /* dark mode인 경우의 CSS */
}

@media (prefers-color-scheme: light) {
  /* light mode인 경우의 CSS */
}

 

 

현재 prefers-color-scheme은 이미 단종 단계에 있는 IE 계열의 브라우저를 제외하고는 모든 브라우저에서 기본적으로 제공하고 있습니다. 그리고 앞에서 언급한 바와 같이 no-preference value는 deprecated 상태라고 하네요.

 

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

 

사용자가 선택하게 하려면?

시스템 설정과 상관없이 토글 버튼 등으로 사용자가 선택하게 할 수는 없을까요? 아쉽게도 "prefers-color-scheme" 미디어 쿼리만으로는 안될 듯싶습니다. 시스템 설정을 사용자 선택에 대해서 오버라이드 하기 위해서는 별도의 클래스, 혹은 attribute 설정이 필요합니다.

 

만약 사용자가 선택하는 다크 모드 구현을 하려고 한다면 아래 글을 참고하세요!

How to override css prefers-color-scheme setting

 

3. prefers-color-scheme 예제

그러면 아주 간단한 예를 들어서 다크 모드가 잘 동작하는지 체크해 보겠습니다. 아래 예제의 설정은 다음과 같습니다.

• Light Mode : 밝은 배경에 어두운 글씨 적용
• Dark Mode : 어두운 배경에 밝은 글씨 적용
• 모드에 따라 제목 변경 (display:none 사용)

 

 

See the Pen Dark Mode by showtime (@paperblock) on CodePen.

 

 

시스템의 모드 설정을 변경해서 테스트해보실 수 있습니다. 참고로 윈도우 10의 경우 "설정 → 개인설정 → 색 → 기본앱모드"에서 변경할 수 있습니다.

 

윈도우10 설정

 

아래는 아이폰에서 라이트모드와 다크모드를 변환해서 살펴본 코드펜의 결과입니다. 시스템 설정에 따라서 잘 반응하고 있는 것을 볼 수 있습니다.

 

아이폰에서의 결과 (라이트모드 vs 다크모드)

 

맺음말

이번 글에서는 시스템의 다크모드에 대응하기 위한 prefers-color-scheme 미디어 쿼리에 대해서 알아보았습니다. 이제 대부분의 브라우저에서 지원하는 것 같으니 비교적 편리하게 시스템의 모드를 반영하는 웹사이트를 구현해 볼 수 있을 것 같습니다.