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

ダークモードとは、パソコンやスマートフォンなどの画面の背景を黒色を基調としてデザインしていくことを言います。スマホの普及により夜間など暗い時間帯や暗い場所でも画面を見る機会が増えています。それに伴い、ダークモードを取り入れているWebサイトやアプリも増えてきています。

ダークモードにするメリット

暗い所で明るい画面を見ると人によっては非常に見づらい場合もあります。また、明るい画面を見続けることで疲れたり、目に負担がかかることもあります。そこで、画面の背景を暗くして暗闇の環境と画面の明るさの差を抑えることで画面が見やすくなったり、目への負担も軽減できたりします。また、使用されているディスプレイによってはダークモードにすることで省エネにも繋がったりします。それでは、Webサイトをダークモードに対応させる方法をいくつか紹介します。

CSSでダークモードに対応する

CSSを使ってWebサイトをダークモードに対応させる場合は、「prefers-color-scheme」というメディア特性を使います。

@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #fff;
  }
}

このようにダークモード時に表示させたいスタイルを記述するだけで簡単に対応することができます。

Darkmode.Jsを使ってダークモードに対応する

「Darkmode.Js」というスクリプトを使っても簡単に対応することができます。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

上記のコードをHTMLに記述するだけで簡単にダークモードに対応させることができます。CSSの「mix-blend-mode」を利用して色を変えているので、場合によってはサイトの配色が結構変わってしまうこともあります。もし、色を変えたくない箇所がある場合は「darkmode-ignore」というクラスを任意のHTML要素に付与することで色の変化を防ぐことができます。

<button class="darkmode-ignore">BUTTON</button>

以上が、Webサイトをダークモードに対応させる方法となります。