Safari가 밝은 웹사이트를 어둡게 바꿔요. CSS도 달라질까요?

밤에 다크 모드로 웹을 보다가 흰 배경의 페이지를 열면 화면이 확 밝아지죠. WebKit이 11월 3일 발표한 Safari 27.3 베타의 Adaptive Dark Mode는 이런 사이트를 브라우저가 어둡게 바꾸는 기능이에요.

사용자가 시스템 화면을 다크로 설정한 상태에서 밝은 사이트를 열면 미리보기를 제안하고, ‘Try’를 눌러 사용해 볼 수 있어요. 사이트가 직접 만든 다크 테마와는 다른 경로예요.

사진까지 반전시키지는 않아요

WebKit 설명에 따르면 브라우저는 페이지가 대체로 밝은지 살피고, 밝은 배경은 어둡게, 짙은 글자는 밝게 바꿔요. 색의 계열을 유지하면서 밝기를 바꾸고, 글자와 버튼을 알아볼 수 있게 대비를 확보하려는 방식이에요.

공식 비교 화면을 보면 카드와 배경은 어두워져도 도시 야경 사진은 유지돼요. 지도의 내부도 밝은 상태예요. 페이지 전체의 색을 한꺼번에 뒤집은 모습과는 다르죠.

사진 대부분은 그대로 두지만, 어두워진 배경에서 보이지 않게 되는 SVG 아이콘이나 로고는 필요하면 변환해요. 비트맵 이미지도 단순한 흑백 로고라면 색을 뒤집을 수 있어요. 반면 그림·게임 등 여러 내용을 담을 수 있는 <canvas>는 바꾸지 않는다고 해요.

개발자는 지원 선언과 실제 스타일을 함께 봐야 해요

이미 다크 모드를 지원한다고 color-scheme으로 알린 사이트에는 자동 변환을 적용하지 않아요. 다만 지원한다고 선언하는 것만으로 작성자가 지정한 모든 색이 다크 테마로 완성되는 것은 아니에요. MDN도 지원 선언과 요소별 스타일 작성을 나눠 설명해요.

WebKit은 자체 테마를 제공한다면 지원 선언을 JavaScript로 나중에 주입하기보다 HTML의 <head>나 CSS의 :root, body에 미리 두라고 권해요. 직접 다크 스타일을 만들 때는 prefers-color-scheme 같은 CSS 기능을 쓸 수 있어요. 선언을 추가한 뒤에는 실제 화면도 함께 확인해야겠죠.

화면 색과 CSS 조회 값은 달라질 수 있어요

자동 변환이 켜져도 JavaScript로 CSS 색을 조회하면 작성자가 정한 원래 색을 돌려줘요. 캔버스에 그린 이미지도 원래 모습으로 처리해요. 사이트가 자동 변환 여부를 알아내 사용자 구별에 활용하지 못하게 하려는 설계라고 WebKit은 설명해요.

그래서 개발자라면 코드가 읽은 색상 값만으로 변환 후 화면까지 확인했다고 생각하면 안 돼요. 특히 사진 위 글자, SVG 로고, 직접 그리는 캔버스를 섞은 페이지는 공식 설명의 처리 경계가 실제 디자인과 어떻게 맞물리는지 볼 지점이에요. 아직 베타인 만큼 밝은 표현을 유지하는 설정까지 실제 Safari에서 확인하는 것이 필요해요.

확인한 범위

• 기준일: 2026-11-04.
• 읽은 것: WebKit 공식 발표와 MDN color-scheme 문서. 지원 선언과 자체 스타일의 차이를 두 문서로 대조하고, 공식 비교 이미지의 두 화면을 별도로 시각 확인했어요.
• 확인하지 못한 것: 이후 베타에서의 only 지원 변화와 개별 사이트 호환성.
• 직접 해보지 못한 것: Safari 27.3 베타 실행. 위 이미지는 WebKit의 공식 예시이며 제가 브라우저에서 재현한 결과는 아니에요.

출처

원문: WebKit 블로그, Introducing Adaptive Dark Mode

보조 문서: MDN의 color-scheme 설명.