WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

みなさんは、「ダークモード」をご存知でしょうか？
ダークモードは黒を基調とした配色なので、暗い場所でiPhoneの画面を見るときに目の負担を軽減する効果やバッテリーの消費も抑えられることができます。
最近ではTwiiterやInstagramなどもダークモードに対応をしています。iOS13の新機能でも実装され、より生活の中でも身近になってきました。

そんなダークモードをWebサイトに対応させる方法を解説していきます。

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

ダークモードへの対応はとっても簡単です。prefers-color-scheme というメディア特性を使って、その中にダークモード時に適用したいCSSを書きましょう。

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

こちらの方法が一番導入が簡単ではありますが、この中にCSSの記述を書いていくとなると長くなってしまいますね。
そんな時は、下記のようなプラグインを使用するのも一つの手です！

Darkmode.jsを使おう

Darkmode.jsを使えば、さらに手軽にダークモードを実装できます。
Webサイトに導入する際は、以下のコードをHTMLに追加しましょう。
※CDNによる実装方法です。

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

実装デモでは、右下にあるボタンをクリックしてみるとダークモードにパチっと切り替わります。

切り替えがされる中で、このボタンの配色は変えたくないな～と思うものも出てきますよね。
そんなときは色を変えたくないHTMLの要素に「darkmode-ignore」クラスを加えましょう。その部分はダークモードが適用されなくなります。

<a class="darkmode-ignore" href="#">Button</a>

切り替えボタンの調整はオプションから可能です。好みのカスタマイズをJavaScriptに記述しましょう。
デフォルトのカラーだとシックなので、Webサイトのカラーイメージに合わせて適宜変えてみましょう。

var options = {
  bottom: '20px', // default: '32px'
  right: '20px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '<img draggable="false" class="emoji" alt="&#x1f313;" src="https://s.w.org/images/core/emoji/11.2.0/svg/1f313.svg">', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

まとめ

Webサイトの閲覧が夜に集中している場合など、どういった場面でダークモードを実装すべきかも考えて、今後のサイト制作に役立てていきたいですね。