코드 한 줄
다크 모드를 처음 만들 때 흰색을 검은색으로, 검은색을 흰색으로 바꾸면 된다고 생각했다. 결과는 눈이 아픈 화면이었다. 순수한 검정 위의 순수한 흰 글자는 대비가 너무 세다.
색은 변수로, 뜻은 이름으로
:root {
--bg: #ffffff;
--text: #1a1d23;
--muted: #69717e;
--line: #e8eaee;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #15171c;
--text: #e6e8ec;
--muted: #9aa2ae;
--line: #2a2e36;
}
}놓치기 쉬운 것
- 버튼 호버 색도 다크용으로 따로
- 그림자는 다크에서 거의 안 보인다. 테두리로 대신
- 흰 배경 로고 이미지
- 사용자가 고른 모드를 기억하기
color-scheme: light dark; 를 선언하면 스크롤바와 입력칸도 알맞은 색으로 바뀝니다.
결국 다크 모드는 색을 뒤집는 일이 아니라, 색마다 역할을 정해 두는 일이었다.