다크 모드를 켠 휴대폰으로 홈페이지를 열었더니 배경은 어두운데 입력창과 스크롤바만 하얗게 남거나, 반대로 글자가 배경에 묻혀 안 보인다는 문의를 종종 받습니다.
대부분 color-scheme 선언이 없거나 색을 고정값으로 박아 둔 경우입니다. CSS 몇 줄로 라이트·다크를 정리하는 순서를 실무 기준으로 정리했습니다.

1. color-scheme으로 지원 범위부터 알려 주기

가장 먼저 할 일은 이 사이트가 어떤 모드를 지원하는지 브라우저에 알려 주는 것입니다. color-scheme을 선언하면 입력창, 셀렉트 박스, 스크롤바 같은 기본 요소가 그 모드에 맞는 색으로 바뀝니다.

/* 이 사이트는 라이트·다크 둘 다 지원 */
:root {
  color-scheme: light dark;
}

/* 라이트만 쓰는 사이트라면 */
:root {
  color-scheme: light;
}

아직 다크 디자인을 준비하지 못했다면 억지로 맞추기보다 light만 선언해 두는 편이 안전합니다. 크롬처럼 페이지 선언을 참고하는 브라우저에서는 의도하지 않은 색 변환이 줄어듭니다.

2. 색은 변수로 모으고 prefers-color-scheme으로 바꾸기

리뉴얼 현장에서 다크 대응이 어려운 이유는 대개 색상이 수십 곳에 #fff, #333처럼 흩어져 있기 때문입니다. 배경, 글자, 테두리 정도만이라도 CSS 변수로 모아 두면 prefers-color-scheme 미디어 쿼리 한 곳에서 값만 바꿔 끼울 수 있습니다.

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #222222;
  --line: #e5e5e5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --text: #e8e8e8;
    --line: #333333;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

최신 브라우저만 고려해도 되는 프로젝트라면 light-dark() 함수로 두 색을 한 줄에 쓸 수도 있습니다. 이 함수는 color-scheme이 선언되어 있어야 동작하고, 2024년 이후 출시된 주요 브라우저에서 지원됩니다. 관리 대상에 오래된 기기가 많다면 위의 변수 방식을 기본으로 두는 것이 무난합니다.

/* 최신 브라우저: 한 줄로 두 색 지정 */
.card {
  background: light-dark(#fff, #1f1f1f);
  border-color: light-dark(#e5e5e5, #333);
}

3. 다크 모드에서 놓치기 쉬운 부분 점검

색만 바꾸고 끝내면 실제 화면에서 어색한 곳이 꼭 나옵니다. 저희가 작업 후 확인하는 항목은 이 정도입니다.

• 투명 배경 로고: 검은 글자 로고가 어두운 배경에 묻히지 않는지. 필요하면 다크용 로고를 <picture>와 media 속성으로 따로 지정합니다.
• 순수 검정·순수 흰색: #000 배경에 #fff 글자는 눈이 부셔서 살짝 낮춘 회색 계열이 읽기 편합니다.
• 그림자: 어두운 배경에서는 그림자가 거의 안 보이니 테두리 색으로 구분합니다.
• 개발자 도구 확인: 크롬 F12 → 렌더링(Rendering) 패널의 prefers-color-scheme 에뮬레이션으로 휴대폰 설정을 바꾸지 않고도 바로 볼 수 있습니다.

삼성 인터넷 등 일부 브라우저는 자체 다크 모드가 페이지 설정과 따로 동작하기도 하니, 마지막에는 실제 휴대폰에서 한 번 열어 보는 것을 권합니다.