【JavaScript】js-cookie.jsを使ってダークモード切り替ボタンを作る。
Index
ダークモードとは？
ダークモードとはメニューや背景の配色を、白基調から黒基調に変更させる機能。
mac OSだとMojave、Winだとwindows10から搭載された。
長時間PC作業をしている人にとっては目の疲れが軽くなるのとバッテリーの持ちがいいとか。
デフォルト
ダークモード
ダークモードの問題
ダークモードは今の所、OSに関する画面にしか適用できず、ブラウザでgoogle検索などすると、今までダークな画面で作業していたにもかかわらずいきなり、白を基調とした検索画面がドン！と出てくるので目が眩しくて辛い。。最近ではYoutubeやtwitterなどはサイト側で「ダークテーマ」や「ダークモード」という切り替えボタンがを設置している。
サイト側で設置できるダークモード切り替えボタンをこのブログでも実装したい！ってことで備忘録。
実装のポイント
- モードを切り替えた後にページ遷移してもダークモードを引き継ぐ
- モード切り替え時のチラツキをなくする
ダークモードの実装
Javascript
ページ遷移してもモードが引き継がれるようにする為に、js-cookie.jsを使ってダークモードの切り替えのクッキーを保存させる。
js-cookie.jsのダウンロードはこちら。
まずはjQueryとjs.cookie.jsを読み込む。
<script src="js/jquery.js"></script>
<script src="js/js.cookie.js"></script>Cookies.setで利用できるパラメータ
| パラメータ | 内容(値) |
|---|---|
| expires | 有効期限（日数） |
| path | 有効なパス（ドメイン全体で利用したい場合は’/’を設定） |
| domain | 有効なドメイン |
| secure | HTTPS接続の場合のみにcookieを送信(デフォルトはfalse) |
クッキーを保存する関数を作成。bodyタグのクラスにdarkmodeがある場合はisActiveという値がクッキーに保存され、ない場合はnotActiveという値が保存される。クッキーの保存期間は365日。クッキーの有効範囲はサイト全体なので’/’を指定。特定のディレクトリのみに適用させたい場合はpath:’/hoge/’となる。
function darkmodeCookie() {
darkmode = $('body').hasClass('darkmode') ? 'isActive' : 'notActive';
Cookies.set('darkmode_cookie', darkmode, { expires: 365, path: '/' });
}次にサイトに設置するモード切り替えボタンを設置。ボタンをクリックすることでbodyダグにdarkmodeを挿入したり取り除いたりさせる。その後に作成した関数darkmodeCookie();をいれてクッキーをクリックのタイミングごとに保存させる。
var flg = "off";
$("#js-switch-mode").click(function () {
$('body').toggleClass('darkmode');
$(this).toggleClass('is-active');
if(flg == "off"){
$(this).html("<i class='fas fa-moon'></i>");
flg = "on";
}else{
$(this).html("<i class='far fa-moon'></i>");
flg = "off";
}
darkmodeCookie();
});CSS
ダークモード用(.darkmode)のCSSを用意して、通常モードのCSSを上書きする。
CSSの記述位置によって反映しない場合があるので、記述の最後に入れるか、!importantで強制的に適用させる。
body {
&.darkmode{
//ここにダークモード時のCSSをまとめて記述。
}
}HTML・PHP
js-cookie.jsで保存したクッキーの値(darkmode_cookie)をphpで取得して判別、クラスの追加を行う。
この部分をjqueryでクラスの追加・削除を行うと、ダークモードにしてページ遷移した時にレンダリングの読み込みの関係で一瞬(0.2秒くらい)jqueryが適用されず、クラスが付与されていないデフォルトモードが表示されるので、phpで行うのがポイント。
<?php $value = $_COOKIE["darkmode_cookie"];?>
<body class="<?php if( $value == "isActive"){ echo "darkmode"; } ?>">切り替えスイッチの記述。
<div id="js-switch-mode" class="switch_mode"></div>まとめ
このブログで必要なのかわからないけどこのサイトに設置しました。
思ってたよりも簡単にできて、挙動としても問題なく動いているのでよければお試しあれ。
