ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

トップ > FF14 > FF14雑記：進捗報告：ロゴぺた・文字入れジェネレータのWebサイトにダークモード実装

FF14雑記：進捗報告：ロゴぺた・文字入れジェネレータのWebサイトにダークモード実装

FF14 FF14雑記 おはララジェネレータ ロゴぺた 文字入れジェネレータ 進捗報告

ざっくり言ってしまうとTwitterで書いた通りなのですが、ダークモードを実装しました。
その経緯と、実装方法です。
Bootstrap+jQueryでのダークモードの実装方法にも触れますが、最初に使い方などを説明しますので、ただダークモードを使いたい方は使い方だけでも読んでいってください。

f:id:gelehrtecrest:20200327224426p:plain

ダークモードって何？

簡単に言うと、暗めのデザインのアプリモードです。
iPhone11などではダークモードでアプリを開くと消費電力が減るなどの効果があります。
また、暗い画面の方が目に優しいと感じる人もいるようです。

使い方について

まずは作っているアプリについて説明を。
場合によってはそちらのソースコードを見てもらう方がわかりやすいかもしれません。

「ロゴぺた」と「文字入れジェネレータ」についての説明

FF14のスクリーンショットにロゴや文字を貼り付けるアプリとして実装しました。
下記にリンクを貼ります。
gelehrtecrest.github.io
gelehrtecrest.github.io

ダークモードでアプリを開く

使い方は単純で、右上の「ダークモード」と書いてあるチェックボックスにチェックを入れるとダークモードになります。
f:id:gelehrtecrest:20200327225035p:plain

チェックボックスに一度チェックを入れておくと、次回アクセス時にもダークモードでサイトが開きます。
アプリ自体の使い方は変わらないので、好きなモードでお使いください。

BootStrap+JavaScript(jQuery)+CSSでのダークモード実装について

参考にしたサイト

こちらのサイトを参考にしました。
www.webcreatorbox.com
github.com

実装

CSS

BootStrapデザインをダークモードのデザインにするためにCSSに以下を追加しました。

/* ダークモード */
.dark-theme {
	background: #000;
	color: #ddd;
	transition: .5s;
}
.dark-theme .jumbotron {
	background: #333;
	transition: .5s;
}
.dark-theme .nav-tabs li.active a{
	background-color: #000;
	color: #333;
	transition: .5s;
}

簡単に説明すると

  • bodyにclass=dark-theme を入れる想定
  • class=jumbotron は明るすぎるので修正
  • class=nav-tabs も少し修正
  • ゆっくり色を変えるために0.5秒かけて暗くするために transition: .5s; を追加
HTML

ダークモード状態を保存しておくために、Cookieを使っています。
js-cookieを使いました。
CDNで読み込むために以下の一文を追記。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

またチェックボックスでダークモード切替をするので以下の一文を追加

<div class="form-control"><input id="btn-mode" type="checkbox"> ダークモード</div>
JavaScript

これは丸々ソースコードを貼ります。
いろんな情報を混ぜて実装したのでJavaScriptとjQueryが混ざってしまったので、いずれ直したい・・・・ですね。

$(window).on("load", function(){
    
    const btn = document.querySelector("#btn-mode");

    // チェックした時の挙動
    btn.addEventListener("change", () => {
        mode_theme(btn)
    });

    // Cookieから読み込んだ時の挙動
    const mode = Cookies.get('mode');
    if(mode == "dark"){
        mode_theme_dark(btn);
    } else {
        mode_theme_light(btn);
    }

});

function mode_theme(btn) {
    if (btn.checked == true) {
        mode_theme_dark(btn);
    } else {
        mode_theme_light(btn);
    }
}
function mode_theme_dark(btn){
    // ダークモード
    document.body.classList.remove("light-theme");
    document.body.classList.add("dark-theme");
    Cookies.set('mode', 'dark');
    $('#btn-mode').prop('checked', true);
}
function mode_theme_light(btn){
    // ライトモード
    document.body.classList.remove("dark-theme");
    document.body.classList.add("light-theme");
    Cookies.set('mode', 'light');
    $('#btn-mode').prop('checked', false);
};

ソースコードを読んでいただければ分かると思いますがやっていることは、

  • id=btn-mode にチェックしているかどうか確認する。
  • チェックされたらダークモードを挿入する挙動をする。
  • ダークモードとしてbody要素にclass=dark-theme を追加する。
  • ダークモードを解除したらbody要素からclass=dark-theme を削除する。
  • サイトを開いたときにCookieを確認し、ダークモードだった場合body要素への追加を行う。

という感じです。

くわしくはGitHubへ

ソースコードはGitHubで公開してあるので、こちらを見てもらった方が早いかもしれません。
github.com

終わりに

比較的あっさりとダークモードを実装できました。
少しでもアプリを使うときのストレスが下がれば嬉しいです。

広告