CSS variables によるダークモード対応タイトルの通り、このサイトをダークモード対応した。 このブログは React と CSS-in-JS ライブラリである Linaria で実装されているが、 結果として JS 側で特別なことをせず、ほとんど CSS だけでダークモード対応を実現している。 実装 実装は大きく3ステップ。 システム設定に合わせた Light / Dark 出し分け ユーザによる Light / Dark 切り替えサポート ユーザによる Light / Dark 切り替えの永続化 最初のステップだけだと prefers-color-scheme を見て色を出し分けるだけでいいので単純だが、それ以降はそんなに自明ではない。 やりたいのは「Light 用と Dark 用の2つの色定義セットを用意して、それを何らかの手段で切り替える」ということ。 この切り替え動作をど