안드로이드에서 내 웹사이트 색이 멋대로 바뀔 때 (자동 다크 모드와 color-scheme)

PC에서는 멀쩡한 웹사이트가 안드로이드 폰에서만 색이 이상하게 바뀌어 보일 때, 브라우저의 자동 다크 모드가 원인인지 확인하고 막는 방법입니다.

어두운 배경으로 만든 웹 게임을 폰에서 열어 봤더니 색이 묘하게 달랐습니다. 빨간 체력바가 칙칙한 갈색으로 보이고, 알림 배지 색이 바뀌고, 화면 위아래에 회색 띠가 생겼습니다. PC 크롬과 개발자 도구의 모바일 화면에서는 전부 정상이었습니다.

CSS를 아무리 들여다봐도 그런 색을 쓴 곳이 없었는데, 원인은 코드가 아니라 브라우저가 색을 바꿔 칠한 것이었습니다. 이미 어두운 디자인인데도 "밝은 페이지"로 보고 자동 다크 모드를 덧씌운 겁니다.

- 안드로이드 크롬과 삼성 인터넷에는 웹페이지를 강제로 어둡게 만드는 기능이 있다

- 페이지가 어두운 테마를 지원한다고 선언하지 않으면 밝은 페이지로 보고 색을 바꾼다

- color-scheme 을 dark 로 선언하면 브라우저가 손대지 않는다

- PC에서는 크롬 실험 기능 플래그로 같은 현상을 재현할 수 있다

1. 자동 다크 모드는 색을 "다시 계산"한다

크롬에는 "웹 콘텐츠 자동 다크 모드(Auto Dark Mode for Web Contents)"가, 삼성 인터넷에는 웹페이지까지 어둡게 만드는 다크 모드가 있습니다. 사용자가 이 기능을 켜 두면 브라우저는 밝아 보이는 페이지의 배경과 글자색을 알고리즘으로 바꿔서 그립니다.

문제는 이 계산이 "밝은 페이지를 어둡게" 만들기 위한 것이라 이미 어두운 페이지에 적용되면 엉뚱한 결과가 나온다는 점입니다. 채도가 높은 빨강이 갈색으로 눌리거나, 의도하지 않은 곳에 회색 면이 생기는 식입니다.

그래서 증상만 보면 CSS 버그 같지만, 같은 주소를 PC에서 열면 멀쩡합니다. 폰에서만, 그리고 다크 모드를 켠 사람에게만 나타난다면 이 기능을 먼저 의심해 볼 만합니다.

2. PC에서 재현하기

폰을 붙잡고 확인하기는 번거로우니 PC 크롬에서 같은 기능을 켜서 재현할 수 있습니다. 주소창에 실험 기능 페이지를 열고 자동 다크 모드를 켠 뒤 크롬을 다시 시작하면 됩니다.

이 상태로 페이지를 열었을 때 폰과 같은 색 변화가 보이면 원인이 확정됩니다. 콘솔에서 지금 페이지에 적용된 color-scheme 값을 찍어 보면, 아무것도 선언하지 않은 페이지는 normal 로 나옵니다. 브라우저 입장에서는 밝은 페이지인지 어두운 페이지인지 모르는 상태라는 뜻입니다.

3. 해결: 어두운 디자인이라고 선언하기

브라우저에게 "이 페이지는 처음부터 어두운 테마로 만들었다"고 알려 주면 됩니다. 방법은 color-scheme 을 HTML의 meta 태그와 CSS 양쪽에 dark 로 선언하는 것입니다.

meta 태그는 CSS를 읽기 전, 페이지를 처음 그릴 때부터 적용되게 하려고 넣습니다. CSS의 :root 선언은 같은 뜻을 스타일 쪽에도 남겨 두는 것이고, 둘 다 넣어 두면 브라우저마다 읽는 시점이 달라도 안전합니다.

4. 함정: "dark light" 로는 막히지 않았다

처음에는 밝은 테마도 지원하는 사이트라서 color-scheme: dark light 로 두 가지를 다 선언했습니다. 그런데 이렇게 했더니 폰의 시스템 설정이 밝은 모드일 때 여전히 색이 바뀌었습니다.

dark light 는 "둘 다 지원하니 사용자 설정에 맞추겠다"는 뜻이라, 시스템이 밝은 모드면 페이지는 밝은 쪽으로 해석됩니다. 그 상태에서 브라우저 자체의 다크 모드가 켜져 있으면 밝은 페이지로 보고 다시 어둡게 칠해 버린 것으로 보입니다. 실제 화면은 밝은 테마로 그려져 있지 않으니 결과가 더 이상해졌습니다.

결국 dark 하나만 선언하고서야 모든 경우에 색이 그대로 유지됐습니다. 사이트 안에서 밝은 테마로 바꾸는 기능은 CSS 변수로 직접 처리하고, 브라우저에게는 "이 페이지는 어둡다"는 신호만 일관되게 주는 쪽이 안전했습니다.

5. 선언하면 같이 바뀌는 것

color-scheme: dark 는 브라우저 기본 스타일도 어두운 쪽으로 바꿉니다. 따로 색을 지정하지 않은 입력창, 버튼, 스크롤바, 기본 배경이 어두운 모양으로 그려집니다.

- 어두운 디자인이라면 대부분 오히려 자연스러워진다

- 밝은 테마를 쓰는 화면이 있다면 입력창과 버튼 색을 직접 지정해 둔다

- 반대로 밝은 디자인인데 자동 다크를 막고 싶다면 only light 로 선언하는 방법이 있다

6. 정리

폰에서만 색이 이상하다면 코드보다 먼저 브라우저의 자동 다크 모드를 의심해 볼 만합니다. 페이지가 어떤 색 체계로 만들어졌는지 선언하지 않으면, 브라우저는 밝은 페이지로 보고 색을 다시 계산합니다.

어두운 디자인이라면 meta 태그와 CSS 양쪽에 color-scheme: dark 를 선언하고, dark light 처럼 사용자 설정에 따라 갈리는 값은 피하는 것이 확실했습니다. PC 크롬의 실험 기능으로 재현해 보면 폰 없이도 확인할 수 있습니다.

여기까지 안드로이드 자동 다크 모드로 웹사이트 색이 바뀌는 문제에 대해서 작성해봤습니다. 여기까지 읽어주셔서 감사합니다!