filter:invert()で雑にブログをダークモード対応する

社内のフロントエンドのチャンネルで話していて、Safari Technology Previewではすでにメディアクエリを使ってダークモードかどうか判定できる、とid:cockscombに教えてもらったので、このブログで試してみた。最新情報教えてもらえてありがたい。

ブログのテーマをまるごと対応させる気力はなかったので、bodyの色をfilter:invert()で反転、そしてimgはさらにfilter: invert()で反転させることで、数分で完成した。

@media (prefers-color-scheme: dark) {
  body {
    filter:invert();
  }
  img {
    filter: invert();
  }
}

ダークモードの様子 海苔の写真は反転していない

色の反転には関心があって、2008年(11年前!)ごろはウェブも黒字に白にしたいじゃんって常にOSの設定で色を反転して暮らしていた。
blog.sushi.money

そして、画像の色まで反転してしまうと気持ち悪いので、色を反転させるプロキシサーバを自作して使っていた。
blog.sushi.money

しばらく反転して暮らしていたけど、ふだんウェブサービスを作っていて、普通のユーザーが普通に使う画面で開発しないと、想定する使い勝手にならないということに気づいて、仕事に開発に支障が出たのでやめた。