目かかる負担を軽減してくれる「ダークモード」をwebサイトに対応させるための方法について解説していきます。

ダークモードは有機ELパネルが使われているディスプレイでは電力消費を抑えられると言われています。

そのため目だけでなくスマートフォンなどの端末にも優しい、まさに「いいことづくめ」と言えますが、対応していないブログサイトは多いです。

ところでサイトをダークモードに対応させる方法は二つあります。

CSSの「prefers-color-scheme」を用いた方法でオートマチックに対応

ブラウザがダークモード対応の場合にあらかじめダークモードで表示する

CSSのprefers-color-schemeを用いてダークモード対応にする方法です。

CSSファイルに以下のように記述します。

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

@media (prefers-color-scheme: dark) {～｝の中にダークモードで適用したい色などを書き込んでいきます。

たったこれだけなので、お手軽ですね！

オートマチックにモードが切り替わるので、手っ取り早くダークモードを導入したい人におすすめの方法です。

CSS変数でダークモード用のコードを作成すると管理が楽になる

prefers-color-schemeの中にダークモード用のコードを設定していく場合、一つ一つのクラスにカラーコードを書き込んでいては大変ですよね。

そこでおすすめなのがCSS変数です。

これはあらかじめ登録した変数を使いまわすことで、まとめていくつものクラスにコードの適用が可能になります。

例えば以下のように変数を登録します。

:root {
    --dark-gray: #555;
    --gray: #aaa;
    --light-gray: #ccc;
    --white: #fff;
}

:root {～｝の中に書き込まれているのが変数です。

–gray: #aaa;のように先にコードを決めてしまい、同じ色を適用するところにはこの変数を使い回すのです。

h2{
    font-size: 1.4rem;
    color: var(--gray);
}

「color: var(–gray);」のようにすれば、文字の色が登録しておいた#aaaになります。

このメリットは同じCSS変数を適用している箇所なら、登録している変数を修正するだけで、一気に色を変えるといったことができる点です。

同じコードをいくつもの箇所に仕様する場合はCSS変数を使ってみましょう。

javascriptでダークモード用のCSSに切り替える方法

自分で好きな時にダークモードで表示できるようにする

prefers-color-schemeを使ったやり方はブラウザの設定によってはダークモードが適用されないことです。

だからといって、ダークモードのためだけにいちいちブラウザの設定を変えることはしないでしょう。

あるいは自分で好きな時にダークモードにしたいと思う人もいるはずです。

そういう時にはjavascriptを使った方法がおすすめです。

まずはダークモードに切り替えるためのスイッチをチェックボックスを使って設置します。

そして次にダークモードの時のCSSを設定しておきます。

:root {
　--black: #000;
　--white: #fff;
}
body {
　transition: .3s;
}
body.on {
　color: var(--white);
　background-color: var(--black);
　filter: brightness(70%);
}

あとはチェックボックスに合わせてCSSが切り替わるようにjavascriptを用意します。

let btn = document.querySelector("#mode");
btn.addEventListener("change", () => {
　if (btn.checked == true) {
    // ダークモード
    document.body.classList.add("on");
　} else {
    // ライトモード
    document.body.classList.remove("on");
　}
});

ここではダークモードの際に「on」というクラスが追加で付与されるようになっています。

See the Pen
Untitled (@xiubltih-the-builder)
on CodePen.

これでダークモードの切り替えができるようになりました。

ダークモード切り替え時の動きを少し柔らかくすると良い

ダークモード切り替え時は画面が急に変わるのではなく、ふんわりと変化した方が良いでしょう。

transition: .3s;などを追加してあげるだけでも、だいぶ変わります。

また背景色が暗くなるのに合わせて明るさを少し落としてあげると、目にかかる負担も軽減されます。

明るさはfilter: brightness(70%);などで調整可能です。

最近は暗い時間帯でもモニターを見ることは多いと思うので、ぜひあなたのサイトにも取り入れてみてください。

個人的にはかなり目が楽になると感じます。