目に優しくて電力エコなダークモード(ナイトモード)をサイトやブログに導入する方法。ボタンで非同期切り替え

2019-07-23 670 1671

今後は導入がスタンダードになりそうなダークモード

2018年頃から有名どころのアプリやサイトで
ダークモード（ダークテーマ）への切り替えができるようになってきました。

ダークモードがもたらす効果は以下の２点。

「目の疲れを軽減」
「消費電力の低減」（有機ELディスプレイの場合のみ）

TwitterやYoutubeを一日中見ている人にとっては、このダークモードは嬉しい。
背景が真っ白だと、目がチカチカしてきます。

クリエイティブツールのAdobe製品ではダークモードがデフォルトになっていますし、
プログラマーが使うエディタ系のツールもダークモードが人気の様子です。

今後、サイトやアプリではダークモードを導入するのが当たり前になっていくかもしれません。

ダークモードの設置方法

当ブログでもダークモードを導入しましたので、設置方法を紹介します。
やや上級者向けの技術です。

HTMLファイルに下記のコードを追加してください。

//cssの読み込み

<!----><!----><link rel="stylesheet" href="/css/style.css" id="cssMode">



//切り替えボタン

<div id="cssModeSwitch">表示モード</div>

CSSを読み込む際にIDを付けておきます。
切り替えボタンを好きなところに配置してください。

ダークモード用のCSSも用意が必要です。
style.css （通常時）
style_dark.css （ダークモード時）

次は、jqueryで切り替えボタンを押したら、cssのhref属性の値をダークモード用のファイル名に変わるようにします。

＜CSSの切り替え動作のみ＞

//jqueryのバージョンは何でも大丈夫です

<!----><!----><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!----><!----><script>

$("#cssModeSwitch").click(function(){

    if($("#cssMode").attr("href").match(/dark/)){

        $("#cssMode").attr("href","/css/style.css");

    }else{

        $("#cssMode").attr("href","/css/style_dark.css");

    }

});

</script>

match関数で文字列検索をしています。
ファイ名に「dark」の文字がある場合は通常CSSに変更。

ダークモードの切り替え自体は簡単です。
しかし、これではページ毎に切り替えボタンを押さないといけません。

一度ダークモードを押したら、次にモード切り替えボタンを押すまで、ずっとダークモードのままページ遷移をしていかないといけません。
それには「クッキー（cookie）」を利用する必要性があります。

クッキーはサーバーではなく、ユーザーのブラウザにデータを保存するものです。
ですので、ブラウザでクッキー削除の処理をしない限り、ずっとダークモードのままです。
TwitterやYoutubeのダークモードも、おそらくクッキーの値で判断していると思います。

では次はクッキーを利用する場合のjqueryのコードを見てみましょう。

＜ダークモード簡易導入のコード＞

<!----><!----><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

//jqueryの後にjquery.cookieを読み込みます

<!----><!----><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>



<!----><!----><script>

$("#cssModeSwitch").click(function(){

    if($("#cssMode").attr("href").match(/dark/)){

        $("#cssMode").attr("href","/css/style.css");

        $.cookie('mode', '0', { expires: 365, path:'/'}); //サイト全体でクッキー有効＋365日間保存

    }else{

        $("#cssMode").attr("href","/css/style_dark.css");

        $.cookie('mode', '1', { expires: 365, path:'/'});

    }

});



//再訪問時の為のコード

$(document).ready(function(){

    if($.cookie('mode') == 1){

        $("#cssMode").attr("href","/css/style_dark.css");

    }else{

        $("#cssMode").attr("href","/css/style.css");

    }

});

</script>

クッキー名modeの値が「１の場合はダークモード」、「０の場合は通常」という分岐文です。
javascriptでcookieを扱う場合は、jquery.cookieを扱うとコードを分かりやすくできます。

サイトに再訪問した時に、以前の状態で表示をしてあげるコードも大切です。
ページを読み込んだ際に１回だけ実行されます。

ダークモードCSSの組み方次第でコードが変わります

今回は、CSSを丸ごと変える方法を紹介しました。
ですがこの方法は切り替える際に、CSSが空になる瞬間があり不格好です。

ですので、通常CSSにプラスでダークモード用のCSSを読み込むのが良さそうです。
!importantを使って強引に色の値を変えたものでいいと思います。

その場合は、jqueryのコードを以下のように編集する必要があります。
「cookieの値が１の場合はダークモードCSSを読み込む」
「cookieの値が０の場合はダークモードCSSを読み込まない」

＜ダークモード簡易導入のコード（改）＞

<!----><!----><link rel="stylesheet" href="/css/style.css"> //こちらは常時読込みなのでID不要

<!----><!----><link rel="stylesheet" href="/css/none.css" id="cssMode"> //中身が空のCSSを用意しておきます



<!----><!----><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!----><!----><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>



<!----><!----><script>

$("#cssModeSwitch").click(function(){

    if($("#cssMode").attr("href").match(/dark/)){

        $("#cssMode").attr("href","/css/none.css");

        $.cookie('mode', '0', { expires: 365, path:'/'});

    }else{

        $("#cssMode").attr("href","/css/style_dark.css");

        $.cookie('mode', '1', { expires: 365, path:'/'});

    }

});



//再訪問時の為のコード

$(document).ready(function(){

    if($.cookie('mode') == 1) $("#cssMode").attr("href","/css/style_dark.css");

});

</script>