今流行のダークモードをjQueryで実装する!!–TamoTech–

  • LINEで送る
今流行のダークモードをjQueryで実装する

2020年9月20日にiOS 13のアップデートが行われ,ついに!待望の!ダークモードが実装されました!!このダークモードって見た目がかっこいいだけじゃないんです!ダークモードには,低照度時の目への負担の軽減消費電力の低減等の利点があります.今回はWebページにおけるダークモードを「jQuery」を用いて実装していきます.

サンプルページ

ダークモード

今回作成したサンプルページのイメージはこんな感じです.右上の月マークのボタンを押すと,Webページ全体がダークモードに切り替わります.またライトモードでは月マークを表示し,ダークモード時では電球マークを表示させるように切り替えます!それではコードをみていきましょう!サンプルページのコードを中心に解説していきますが,レイアウトのためのCSSやHTML,ダークモード以外のjQueryの詳細は省略します.

HTML

<div class="darkMode">
    <div class="darkMode_trigger">
        <i class="fas fa-moon"></i>
        <i class="fas fa-lightbulb"></i>
    </div>
</div>

ダークモードの切り替えに使用するボタンのコードになります.「Font Awesome」を使用して月マークと電球マークを取得します.「Font Awesome」の使い方はこちらのサイトが分かりやすいです!

CSS(SCSS)

body {
    transition: 0.5s;
}
.darkMode {
    .darkMode_trigger {
        position: fixed;
        right: 20px;
        top: 20px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        opacity: 0.8;
        transition: 0.5s;
        z-index: 100;

        i {
            font-size: 25px;
        }
        .fa-moon {
            color: rgb(255, 255, 255);
        }
        .fa-lightbulb {
            color: rgb(0, 0, 0);
            display: none;
        }
    }
    .darkModeActive {
        background-color: rgb(255, 255, 255);
        .fa-moon {
            display: none;
        }
        .fa-lightbulb {
            display: block;
        }
    }
}

.dark {
    background-color: #161616;
    transition: 0.5s;
    header {
        color: #e9e9e9;
        background-color: #161616;
        border-bottom: 1px solid #e9e9e9;
        transition: 0.5s;
    }
    #container {
        .sample-box {
            background-color: #161616;
            color: #ffffff;
            transition: 0.5s;
        }
    }
    footer {
        background-color: #161616;
        border-top: 1px solid #e9e9e9;
        transition: 0.5s;
    }
}

今回はSCSSでCSSを記述しています.ダークモード中のデザインを「.dark」以下に書けば,CSSで記述するよりすっきりします.

まずは「.darkMode_trigger」に対してボタンのデザインと位置を指定します.電球マークの方はダークモード中に表示させるので,{ display: none }で非表示にします.

「.darkModeActive」はボタンが押された時に「.darkMode_trigger」要素に追加するクラスです.このクラスがある場合は月マークを非表示にし,電球マークを表示させます.ボタンの背景色とマークの色もここで指定しています.

「.dark」はbody要素に追加するクラスです.ボタンが押されることで追加されます.この「.dark」以下にダークモード時のデザインを追加で指定します.

ダークモードでデザインが切り替わる要素には{ transition: 0.5s; }を指定しておくと,急に切り替わることなくゆっくり切り替わります.

javascript(jQuery)

$(function(){
    let $body = $('body'),
        $darkMode = $('.darkMode'),
        $darkMode_trigger = $darkMode.find('.darkMode_trigger');

    $darkMode_trigger.on('click',function(){
        $(this).toggleClass('darkModeActive');
        if($(this).hasClass('darkModeActive')){
            $body.addClass('dark');
        } else {
            $body.removeClass('dark');
        }
    });
});

.darkMode_trigger」にクリックイベントを設定します.この要素がクリックされると,この要素にtoggleClass()で「darkModeActive」クラスがなければ追加し,あれば消去します.「darkModeActive」クラスの有無で「body」要素に「.dark」クラスを追加するか消去するかをif文で指定します.

実際のデザインの指定等はCSSで行っているので,jQueryではクラスの追加及び消去が主な役割となります.

まとめ

今回は今流行のダークモードについて解説しました.ダークモード時のデザインの指定が必要ですが,jQueryはクラスの追加消去のみでできるため,とても簡単に実装できます.

基本的にスマートフォンのようなモバイル版での実装が基本となると思います!デスクトップ版ではあんまり意味のないように感じます.スマホは照明のないところでも見る機会が多くあると思うので,モバイル版のデザインで取り入れてみてはどうでしょうか!

サンプルページはこちらからも閲覧できます.

サンプルページのすべてのソースコードはこちらからダウンロード可能です.

最新の投稿

SNSでもご購読できます。

コメントを残す