ダークモードとライトモードで画像を変える

画像とサイトの背景色の色が同じ時にどこから画像かわからないなど、ダークモードとライトモードで画像を変えたいときがある。

picture要素のmedia属性を使うことで、モードに応じた画像を表示できる。

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="dark.jpg">
  <source media="(prefers-color-scheme: light)" srcset="light.jpg">
  <img src="default.jpg" alt="fallback">
</picture>