ページと一緒にダークモードへ移るカウンター

カウンターは他人のページの上にある画像です。そのページにダークモードがあっても、画像は知りません。サーバー上で描かれたのは、訪問者のシステム設定が事実として存在するよりずっと前だからです。暗いページに白い記章 — よくある結果で、穴があいたように見えます。

ここのデザインのうち十五点は、それでも対応します。ページに尋ねるのでもなく、JavaScript でもなく — 一行も関与していません。画像が自分で切り替わります。

どうやって

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 は、ダークモードがないことより悪い。そして描けるカウンターは、賢いカウンターより価値があります。