ダークモードとライトモードの切り替えをグローバルナビゲーション（上の方の半透明の白い領域）から簡単に行えるようにした（これまではこのサイトについてのページで切り替える必要があった）。デフォルトは OS の設定準拠で、 OS がダークモードであればダークモードに、ライトモードであればライトモードで表示される。手動でテーマを切り替えると Cookie に設定値を保存する。機能と見た目は MDN Web Docs を参考にした。
CSS がぐちゃぐちゃなのでかなり難儀した（ 3 年前にも同じことを書いている）。ダークモードとライトモードの切り替えなんて自分しかしていないと思うがかなり満足度の高い休日プログラミングだった。
OS の設定に応じて自動的にダークモードとライトモードを切り替える（メディアクエリで prefers-color-scheme: light とかやる）ようにしていたが、自分でブログを見ていてダークモード状態で閲覧する時間が短いことに気がついた。考えれば当たり前で夜は寝てるのでダークモードで閲覧する時間が短くなるのは当然だ。個人的には自分のブログはダークモードのときのデザインが気に入っている（ 10 年くらい変えてない）ので、 OS のテーマ設定に加えて閲覧者が自分でダークモードかライトモードかを選べるようにした。設定値は Cookie に保持するようにしてる。個人的に便利になった。切り替えは About ページ内か以下の テーマ変更 ボタンでできるようになっている。
このサイトのデザインは黒地に白文字でダークモードという概念が出てくる前からダークモードだった。家のパソコンで見るときには見づらいと思うことはなかったが、外出先で日中にスマートフォンでサイトを見ると黒地に濃い赤色のリンクは見づらいなぁと思うことがあった。最近、 Mac や iPhone でダークモードの概念が浸透してきたので、自分のサイトの場合は昼間用のライトモード対応を行うことにした。こういう感じのメディアクエリを書けばよい。
@media (prefers-color-scheme: light) {
...
}ただ、元々の CSS が結構ぐちゃぐちゃな書き方で難儀した。ダークモードとライトモードの切り替えが行えるサイトは必然的に CSS のメンテナンス性が高い状態だと思う。明暗を反転したときにこの色はこうなる、という対応関係が綺麗に提示できるような状態は、利用するカラーをシステマティックに整理できているということだと思う。 Sass で書いてあるなら利用する色はきちんと変数化されていて適切な命名がなされているとかそういう状態だと思う。 CSS の設計健康診断としてダークモード・ライトモード切り替え対応をやってみるのは結構いいと思う。