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

ダークモードの表示サンプル

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

身近になったダークモードですが、ブラウザや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;
    }
  }

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。