Webサイトをダークモードに対応させる方法【CSSだけで簡単】

どうも、おぎくぼです。

今回はWebサイトをダークモードに対応させる方法について書きます。

JSは解説がめんどくさいので、このサイトをダークモードに対応させたCSSの記述のみの方法と、Darkmode.Jsを使用した方法を紹介します。

CSSのみを使用

この方法はCSSのみを記述します。なのでHTML/CSSしかできない方でも簡単に実装することができます。

このコード↑を貼り付けて、あとはこの中にダークモードの時のスタイルを記述すればOKです。簡単ですね。

この簡単な記述だけで、ダークモード設定時はスタイルを変更してくれます。

オススメの方法です。

Darkmode.Jsを使用

この方法はとても簡単ですが、クセがすごいです。

とりあえずDarkmode.Jsを使用した実装方法をみてみましょう。

HTMLに以下の記述を追加してください。(</body>あたりに)

これだけです!簡単ですね。

GitHubのページの下にいくと詳しい使用法が書いてあります。(こちらからGitHubに遷移できます!

参考までに。

問題点

Darkmode.Jsは白が黒になるだけでなく、それ以外の色も変わってしまいます。

ちなみに私のサイトで使用すると、オレンジが赤になってしまいます。(ちょっとかっこいい)

色が変わって欲しくないところには、darkmode-ignoreクラスを付与すればいいそうです。

ただ意外とめんどい…ですよね。

あまりオススメはできないです。

まとめ

今回はダークモードを実装する方法を2つ紹介しました。

他にも実装方法があるので興味があればググってみてください。

ダークモードを実装するだけでサイトの閲覧が快適になるので、ぜひやってみてください。

目にストレスが少ないと最高ですよね!

ではまた。