【HTML・CSS】ダークモードで適した画像に切り替える方法

ダークモードのときは通常の画像ではなく、それように最適化した画像を使いたい場面があるでしょう。特にアイコンなどは黒ベースのものに対して文字色などに合わせて白ベースのものにしたいことがあります。そんなときの出し分け方法です。JavaScriptなど使わずネイティブの機能でHTML・CSSの画像の出し分けができます。

サンプルはこちら

<img>タグの場合

<img>タグで読み込む場合は<picture>タグと<source>を組み合わせることで実現できます。

<picture>
  <!-- ダークモード用 -->
  <source
    srcset="hoge-dark.jpg"
    media="(prefers-color-scheme: dark)"
  />
  <!-- ライトモード用 -->
  <source srcset="hoge.jpg" />
  <img
    src="hoge.jpg"
    alt="hoge"
    width="300"
    height="300"
  />
</picture>

<source>タグはmedia属性でメディアクエリと同様の指定ができます。ここでは(prefers-color-scheme: dark)でダークモード用の画像をここで指定しています。<picture>タグは上から順に条件に合致する<source>タグがないか見えていきます。ダークモードを指定している人は1つ目でマッチし、ライトモードあるいは未指定の場合は2つ目の通常画像がマッチします。これで<img>タグにおける出し分けは完了です。

CSS background-imageの場合

CSSの背景画像の場合はさきほど書いた、メディアクエリを使って出し分けできます。

/* ライトモード用 */
.bg {
  background-image: url("hoge.jpg");
}
/* ダークモード用 */
@media (prefers-color-scheme: dark) {
  .bg {
    background-image: url("hoge-dark.jpg");
  }
}

ダークモードの人はメディアクエリの@media (prefers-color-scheme: dark)内のプロパティによって上書きされるので、ダークモード用の画像がbackground-imageプロパティに指定されます。これでCSS背景画像の出し分けは完了です。

おまけ ブラウザでの確認方法

余談ですが、ChromeとFirefoxでprefers-color-schemeをエミュレートする方法です。

Chromeの場合

デベロッパーツールを開き、elementsタブのCSSなどが確認できる欄の上部のアイコンから切り替えられます。

Firefoxの場合

Firefoxの場合はデベロッパーツールを開き、インスペクタータブにある、適用されているCSSなどが見られるルールビューの中に太陽アイコンと月アイコンがあるのでこれをクリックすることでそれぞれのカラースキームをエミュレートできます。