어두운 모드를 따라가는 카운터

카운터는 남의 페이지에 놓인 그림입니다. 그 페이지에 어두운 모드가 있어도 그림은 모릅니다. 방문자의 시스템 선호가 사실로 존재하기 훨씬 전에 서버에서 그려졌기 때문입니다. 어두운 페이지 위의 흰 배지가 흔한 결과이고, 구멍처럼 보입니다.

여기 디자인 가운데 열다섯은 그래도 그것을 다룹니다. 페이지에 물어보지도 않고 자바스크립트도 없이 — 관여하는 자바스크립트가 아예 없습니다. 그림이 스스로 바뀝니다.

어떻게

SVG는 그림이 아니라 문서이고, 문서는 스타일시트를 지닐 수 있습니다. 그래서 서버는 디자인을 밝은 판과 어두운 판으로 두 번 그려 한 파일에 담고 CSS 세 줄을 더합니다:

.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}

브라우저는 그 미디어 쿼리를 그림 안에서 적용합니다. 그림이 다른 도메인에서 평범한 <img> 태그로 불려 왔을 때도 그렇습니다. 시스템을 어둡게 바꾸면 카운터가 따라갑니다 — 다시 불러오지 않고, 둘레의 페이지가 조금도 관여하지 않고 말입니다.

값은 얼마인가

두 판이 다 파일에 들어 있으므로 파일은 약 두 배입니다. 한 디자인에서 잰 값: 보통 1,029바이트, 어두운 쌍둥이와 함께 2,041바이트입니다. 그것이 정직한 값이고, 그것이 기본값이 아닌 까닭입니다. 모두에게 지우는 대신 삽입할 때 청하도록 두었습니다.

두 번째 요청도 없고 두 번째 왕복도 없습니다. 파일 하나가 도착하고, 필요 없는 절반은 결코 그려지지 않습니다.

그 한가운데 있는 덫

SVG의 그러데이션, 필터, 마스크는 id로 참조됩니다. 디자인의 두 판은 같은 코드가 만들므로 둘 다 g1, g2 같은 이름의 그러데이션을 지니고 옵니다. 둘을 한 문서에 넣으면 id의 두 번째 정의는 그냥 적용되지 않습니다 — 어두운 판이 소리 없이 밝은 판의 색으로 그려집니다.

오류는 나지 않습니다. 파일은 유효합니다. 그저 잘못 보이고, 조립이 아니라 디자인 탓으로 돌리기 쉬운 방식으로 그렇습니다.

그래서 두 절반을 붙이기 전에 어두운 판의 모든 id에 접두사를 붙여 이름을 바꾸고, 그것을 가리키는 모든 url(#...)도 맞추어 다시 씁니다. 작은 단계이고, 건너뛰면 얼핏 보아서는 설명할 수 없는 결함이 생깁니다.

언제 거부하는가

두 절반 가운데 하나가 없거나, 둘 가운데 하나가 <svg> 요소를 내지 못하거나, 둘이 바이트 단위로 같게 나오면 — 그 디자인에 어두운 변형이 없다는 뜻입니다 — 밝은 판을 그대로 돌려줍니다. 절반만 조립된 SVG는 어두운 모드가 아예 없는 것보다 나쁘고, 그려지는 카운터가 영리한 카운터보다 값어치가 큽니다.