다크 모드의 여섯 단계 (2024)

다크 모드 구현을 브라우저 기본 지원에서 시작해 JavaScript 제어까지 점진적으로 넓히는 8단계로 정리한다.

• Level 1: <meta name="color-scheme" content="light dark">만으로 사용자 색상 스킴 선호를 따르게 한다.
• Level 2: html { color-scheme: light dark; }로 CSS에서 같은 효과를 낸다. UA 기본 스타일과 system colors를 활용하면 의외로 깔끔하게 구성된다.
• Level 3: light-dark() 함수로 색상 값을 직접 분기한다. 다만 작성 시점 기준으로는 브라우저 지원이 충분하지 않다.
• Level 4: @media (prefers-color-scheme: dark)로 색상뿐 아니라 이미지, 그림자 같은 요소까지 폭넓게 바꾼다.
• Level 5: link media="(prefers-color-scheme: ...)"로 light/dark 전용 스타일시트를 분리한다. 큰 커스터마이징에는 이 방식이 적합하다.
• Level 6: window.matchMedia('(prefers-color-scheme: dark)')로 JavaScript에서 스킴을 읽고 추가 처리를 한다.
• Level 7: 시스템 선호만 따르는 대신 Automatic / light / dark 3상태 전환기를 둔다.
• Level 8: 클래스나 data-theme 대신 :has()로 실제 <meta name="color-scheme"> 존재를 기준으로 테마를 판별한다.

추가로, CSS Naked Day 관찰을 통해 많은 사이트가 아직 다크 모드를 충분히 준비하지 않았다는 점을 짚고, Safari의 다크 모드 접근성 문제도 언급한다. 인쇄에서는 브라우저들이 prefers-color-scheme를 사실상 light로 취급하는 동작이 관찰되어, 프린터용 스타일 분리가 안전하다는 결론을 낸다.