サイトをダークモードに対応させる

長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。

身近になったダークモードですが、ブラウザやOSが自動で色反転してくれるわけではなくて、ダークモード対応ができているサイトやアプリだけがダークモード用の配色で表示されています。

スマートフォンアプリでは多くのアプリがダークモードに対応していますが、サイトを閲覧しているとまだまだ未対応のサイトは多いです。

暗い画面に目が慣れているところに急に明るい画面が出てくるとビクッとなるので、この機にダークモード対応しておきましょう。HTMLとCSSさえ分かれば簡単です。

ダークモード設定する手順

1. headタグ内にmetaタグで、ダークモード対応してるよ　と書く
2. ダークモード用のCSS書く

これだけです。

headタグにmetaタグを書く

<meta name="color-scheme" content="light dark" />

最初からダーク用配色しかないサイトならcontent=”dark”でも良いです。（というか何も書く必要がないのですが、Google様が「ダークモードユーザーにはダークモード対応サイトを優先する!] 　とか言い出したら困るので予防策で。）

media queryでダークモード用のCSSを用意する

  @media(prefers-color-scheme: dark){
    /* CSS for dark mode here */
  } 

CSS変数を使用していれば、一括で編集できるのでそこまで大変な作業ではないと思います。

/* 例　*/
  :root{
    --mainColor: #000000;
    --subColor: #3d3d3d;
    --bgColor: #ffffff;
  }
  @media(prefers-color-scheme:dark){
    :root{
      --mainColor: #ffffff;
      --subColor: #f5f5f5;
      --bgColor: #333333;
    }
  }