[CSS] 다크모드 완벽 지원하기

🧐 다크모드에서 깜박하는 것

최근 웹 개발의 필수품 중 하나는 다크모드다.

여러가지 웹/앱을 사용하면서 다크모드가 지원되지 않는 서비스를 찾아보기 드물었다.

 

다크모드를 구현하는 방법에는 여러가지 기술이 있지만 공통점이 있다.

모든 컬러를 수동으로 작성해야 한다는 점이다.

 

div, Button, Input, Textarea 등등 눈에보이는 모든 부분의 색상이 재정의 되어야 한다.

 

그러다보니 놓치기 쉬운 부분이 있는데 바로 스크롤바다.

 

브라우저에서 기본 css가 정의되어 있는 항목이 여럿 있지만 가장 대표적인 부분은 Input, Button, 스크롤 바 영역이다. 

이 친구들은 브라우저마다 보이는 스타일이 다르다.

 

그래도 대부분의 서비스에서 input과 button은 스타일 요소로 취급해 디자인을 변경하여 모든 브라우저에서 동일하게 보이도록 작업하는 경향이 있지만 유난히 스크롤바는 디자인하지 않고 기본 스타일을 사용하는 경우가 흔하다.

 

그러다보니 다크모드에서도 간과하여 디자인(색상)이 변하지 않는다.

다크모드에서 스크롤은 흰색이다. 네이버 조차도!

 

그렇다면 어떻게 해야 할까?

스크롤바까지도 디자인해서 적용해야 하는걸까?

 

그치만 그렇게까지 하긴 귀찮다 🤣

(스크롤바를 스타일링하려면 의사선택자로 떡칠해야 한다!)

 

🤫 방법이 있다.

바로 color-scheme를 사용하면 된다.

 

이 친구를 dark light로 지정하면 브라우저에게 다크모드와 라이트모드를 모두 한다고 알려주게 된다.

그러면 브라우저가 알아서 Form 컨트롤과 스크롤바 영역의 색상을 바꿔준다.

 

 

이 정도 차이가 난다.

 

문서 전체에 적용하려면 meta 태그를 사용해도 되고, CSS로 값을 넣어도 된다.

<meta name="color-scheme" content="light dark">
<!-- ↑ light dark 두 값을 모두 넣으면 브라우저 기본 설정에 따라 자동으로 변경된다 -->

:root {
  color-scheme: dark light;
  /* ↑ light dark 두 값을 모두 넣으면 브라우저 기본 설정에 따라 자동으로 변경된다 */
}

 

meta 태그로 값을 지정하면 css를 로드하기 전에 브라우저에게 알려줄 수 있다는 장점이 있다.

하지만 CSS로 넣는다면 개별적으로 컨트롤 할 수 있다는 장점이 있다.

 

많은 사이트에서 다크모드를 구현할때 기본 설정과 별개로 모드를 바꿀 수 있게 하기 위해서 body에 dark 같은 임의의 클래스를 넣고 그 클래스 하위로 색상을 지정하는 경우가 있다.

이럴때는 has 선택자를 이용해서 CSS로 컨트롤하는게 더 나은 사용자 경험을 보여줄 수 있다.

 

:root:has(body.light) {
  color-scheme: light;
}
:root:has(body.dark) {
  color-scheme: dark;
}
:root:has(body.lightdark) {
  color-scheme: light dark;
}

 

❗ 참고

https://bejamas.io/blog/modern-css-properties-your-website-must-have/

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme