夜のテントにやさしい、ダークモードの仕組み

夜のテントの中でスマホを開くと、白い画面は結構まぶしい。
そこで最近のサイトやアプリにはダークモードがあります。
黒背景に白文字の、あの夜仕様です。

切り替えの合図

仕組みは意外と単純で、スマホ側がサイトに「この人はいまダークモード設定です」という合図を送っています。
サイト側のCSSに、合図が来たら配色を差し替える指示を書いておくと、自動で夜仕様に切り替わる。

@media (prefers-color-scheme: dark) {
  body { background: #16211c; color: #e8ede9; }
}

prefers-color-schemeは「利用者が好む配色」という意味の英語です。
名前は仰々しくても、やっていることは配色の着せ替えでしかありません。

対応する側の本音

対応には、すべての色を昼夜2セット用意する手間がかかります。
白黒を反転すればいいわけではなくて、夜には夜の読みやすい組み合わせがある。
このサイトはまだ昼仕様だけです。いつかやりたいと思いつつ、後回しにしています。