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

2019-07-23    99   169

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


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

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

「目の疲れを軽減」
「消費電力の低減」(有機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の値が「1の場合はダークモード」、「0の場合は通常」という分岐文です。
javascriptでcookieを扱う場合は、jquery.cookieを扱うとコードを分かりやすくできます。

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

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


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

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

その場合は、jqueryのコードを以下のように編集する必要があります。
「cookieの値が1の場合はダークモードCSSを読み込む」
「cookieの値が0の場合はダークモード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>
jqueryのコードを組む際に、内容が空のCSSを初期状態で読み込んでおくと組みやすかったです。
none.css (内容が空のCSS)

ダークモードの導入はCSSを用意するのが一番手間になる工程で、設置自体は結構簡単でした。
こんな感じで自作で十分導入ができると思います。

カテゴリ: jQuery

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。