다크 모드를 지원하겠다고 마음먹는 순간, 코드는 두 배가 됩니다. 배경색 한 줄을 정할 때마다 밝은 화면용 값을 쓰고, 그 아래에 어두운 화면일 때는 이 값으로 하는 규칙을 한 번 더 씁니다. 글자색도, 테두리색도, 그림자도 마찬가지입니다. 색이 서른 개면 규칙도 서른 쌍이 됩니다.
그러다 보면 꼭 몇 개가 빠집니다. 다크 모드로 켠 화면에서 흰 배경 위에 흰 글씨가 남아 안 보이는 영역이 생기고, 손님은 그 자리를 빈칸으로 여기고 지나갑니다. 색 하나 고치려면 두 곳을 찾아 고쳐야 하니 시간이 갈수록 두 세트는 조금씩 어긋납니다.
브라우저는 이 문제를 알고 있었습니다. 그래서 CSS에 light-dark()라는 함수가 들어왔습니다. 이제 색을 정할 때 밝은 값과 어두운 값을 한 줄 안에 나란히 적으면, 브라우저가 지금 화면 모드에 맞는 쪽을 알아서 고릅니다.
규칙 두 벌이 값 하나로 줄어든다
예전에는 배경색과 글자색을 정한 뒤, 어두운 화면을 위한 규칙 묶음을 통째로 한 번 더 써야 했습니다. light-dark()를 쓰면 background: light-dark(흰색, 짙은회색)처럼 한 줄로 끝납니다. 앞이 밝은 화면 값, 뒤가 어두운 화면 값입니다.
바뀌는 건 문법만이 아닙니다. 색의 짝이 코드에서 눈에 보이게 됩니다. 예전에는 밝은 값과 어두운 값이 파일의 서로 다른 위치에 흩어져 있어서, 한쪽만 고치고 다른 쪽을 잊는 일이 잦았습니다. 이제 두 값이 붙어 있으니 빠뜨릴 수가 없습니다.
먼저 '이 사이트는 두 모드를 지원한다'고 선언한다
light-dark()가 동작하려면 사이트가 두 모드를 모두 지원한다고 브라우저에 알려줘야 합니다. 최상위에 color-scheme: light dark 한 줄을 넣는 일입니다. 이 선언은 부수 효과가 좋습니다. 브라우저가 만들어 주는 기본 요소들 — 스크롤바, 입력칸, 셀렉트 박스, 날짜 선택기 — 도 함께 어두운 옷으로 갈아입습니다. 본문은 검은데 스크롤바만 하얗게 남아 튀는, 다크 모드 사이트의 흔한 어색함이 이 한 줄로 사라집니다.
손님이 직접 고른 모드도 그대로 존중된다
많은 사이트가 화면 오른쪽 위에 해·달 모양 전환 버튼을 답니다. light-dark()는 이 경우도 순순히 따릅니다. 특정 영역에 color-scheme: dark를 지정하면 그 안쪽의 모든 light-dark() 값이 어두운 쪽으로 바뀝니다. 버튼 하나가 속성 한 줄만 바꾸면 페이지 전체 색이 함께 넘어갑니다. 색마다 클래스를 붙였다 뗐다 하던 자바스크립트가 통째로 사라집니다.
작은 회사 사이트에서 특히 값어치가 있다
이 기능이 반가운 쪽은 대기업 디자인 시스템보다 오히려 작은 회사 사이트입니다. 이유는 단순합니다.
- 유지보수 인력이 적다: 색 규칙이 절반으로 줄면, 나중에 손대는 사람의 실수도 절반으로 줍니다.
- 손님의 절반 이상이 휴대폰: 요즘 휴대폰은 저녁이면 자동으로 어두운 화면으로 바뀝니다. 대응하지 않으면 밤에 들어온 손님만 눈부신 흰 화면을 마주합니다.
- 추가 비용이 거의 없다: 라이브러리도, 빌드 도구도 필요 없습니다. CSS 문법 그 자체입니다.
다만, 아주 오래된 브라우저는 이 문법을 모른다
2024년을 지나며 주요 브라우저에 모두 들어왔지만, 몇 년째 업데이트하지 않은 기기에서는 이 색 규칙이 통째로 무시됩니다. 그러면 색이 아예 지정되지 않은 화면이 나올 수 있습니다. 그래서 실무에서는 기본 색을 평범한 방식으로 한 줄 먼저 쓰고, 그 아래에 light-dark() 값을 덧쓰는 순서를 지킵니다. 새 브라우저는 아래 값을, 오래된 브라우저는 위 값을 씁니다. 아무도 빈 화면을 보지 않습니다.
기술이 아니라 관리의 문제였다
다크 모드가 어려웠던 진짜 이유는 어두운 색을 고르는 감각이 아니라, 같은 정보를 두 벌로 관리해야 한다는 구조였습니다. light-dark()는 그 구조를 지웁니다. 손이 덜 가는 코드는 오래 지나도 덜 망가지고, 덜 망가진 사이트가 결국 손님 앞에서 제 모습을 지킵니다.
CYAN은 새로 만드는 사이트의 색 체계를 짤 때 이런 브라우저 표준을 먼저 검토합니다. 라이브러리를 하나 덜 얹는 결정이, 몇 년 뒤 사장님의 유지보수 비용을 줄여 준다고 보기 때문입니다.
