78で試験的にWebページにダークモードを強制する機能が実装されたというニュースから、prefers-color-schemeというブラウザのカラースキームによってスタイルを切り替えるメディアクエリがあることを知りました。HugoのテーマWhiteplainの暗色版を作ったときから、自動で切り替わるといいのに...とは思っていたので、このメディアクエリを使って明色と暗色が切り替わるようにしました。Darkをthemesディレクトリに入れて、config.tomlでwhiteplainの左側に併記します。ちなみにwhiteplain-lightは今回新しく作りました。Lightを指定しても自動で暗色にされます。Contentsは、prefers-color-schemeメディアクエリのブラケット内のカラー指定は変更しませんが、それ以外は暗色化します。Darkを作ったときは色系のCSSだけパッチを当てる感じで実現しました。darkメディアクエリで自動適用するようにしただけなので、明色のCSSはprefers-color-schemeのブラケットで囲われていません。Darkの対象となってしまいます。darkだろうが明色のCSSを読み込むようにしてやればいいと思ったのですが、一つのCSSファイルは二度読み込まれることがない(?)ため、下記の例だとダークモードの時に色系Style全く効かなくなってしまいます。下記の例では、prefers-color-schemeに対応してないブラウザ(例えばIE)でもcolor-light.cssが適用されません。IEを考慮すると明色か暗色をprefers-color-schemeブラケットの外に置く必要があります。url(./color-light.css);}あっちを立てればこっちが立たずって感じです。Darkは試験機能なので、あまり考えなくていいんですけど。ToDoテーマのスクリーンショットを明暗の両方を表現したものに変更する。whiteplain-lightテーマは、Chromeがダークモードを強制しても明色で表示できるようにする。明色の色系のスタイルを抜き出して別のCSSファイルにする。Whiteplain。