ライト / ダークモード切り替えボタンを付けてみた

2021/04/03 2

カスタマイズ

アイキャッチ

ナビバーに追加した2つのボタン

見た目で大体予想は付くだろうとは思いますがを押すと明るい配色のライトモードに切り替わり、を押すとデフォルトのダークモードに戻るという機能のボタンです。

実装に当たり参考にしたのはこちらのサイト。調べたら他にも様々なスクリプトや実装方法がありましたが、こちらで紹介されてるコードが一番シンプルでわかりやすかったです。

ファビコンSTROBOLIGHTS.tokyo ＜ストロボライツ＞
サムネイル
ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう！
EvernoteやTwitter、YouTubeなどが導入しているデザインに「ダークモード」があります。2019年のトレンドとしても注目されているダークモードはメリットも多いので、ぜひとも導入してみましょう！
https://www.strobolights.tokyo/2019/01/14/post-41319/



導入のきっかけ

個人的に、白画面が眩しく感じるようになってきたのとデザイン的にも好みだったのでずっとダークテーマにしていたものの、暗い画面よりも明るい画面の方が好み & 見やすいという方もいるだろうし、ライトモードという選択肢も用意した方が親切だろうなと思いつつ、面倒くさそうなのでずっと保留にしていました。

最近たまたま、Blogger 独自の CSS テーマデザイナーの代わりになる カスタムプロパティというのを知ってテスト導入してたんですが、カスタムプロパティを使えば個別ページや HTML / JavaScript ウィジェット内の <style> にも変更内容が自動的に適用できるし、ライトモード用の CSS の設定もしやすくなるということがわかり、2種類の CSS を用意してみる気になったというわけなんです。

ちなみに当ブログのライトモード用の CSS はこちら。
元々のデザインがシンプルなせいもありますが、たったこれだけで済んじゃうんですw
この20数行を上書きするとライトモードに変わります。
カスタムプロパティってほんと便利ですね(^^;
:root {
  --bg1: #e5e5ff;
  --bg2: #fbfbff;
  --bg3: #f0f0ff;
  --bg4: #e0e0ff;
  --bg1-t: rgba(229, 229, 255, .8);
  --shadow: #bbb;
  --brand: dodgerblue;
  --subbrand: coral;
  --font: #333;
  --darkfont: #666;
  --lightfont: #fff;
  --negacolor: #fff;
  --link: dodgerblue;
}
#header {
  background-color: var(--brand);
}
#header-text {
  color: var(--lightfont);
}
.search-box-form {
  background: var(--bg2);
}
.mrp-post {
  background: var(--bg2)!important;
}


ライトモードに切り替わるタイミングに関して、当初は prefers-color-scheme のメディアクエリでOS側の設定に合わせてダーク/ライトが自動で切り替わる仕様でいくつもりだったけど、訪問者の好みで自由に切り替えられるようにしたらもっと便利になるんじゃないかなと思い、ボタンによる切替式にしました。


機能について

まだ機能的に不十分で色々突っ込みどころもあるかもしれませんが、その辺はご容赦くださいw
例えば、ページ遷移やリロードをするとデフォルトのダークモードに戻ってしまうことや、ライトモードのボタンを押してから明るい画面に切り替わるまで若干のタイムラグがあることなど…。

間を置いて明るくなるのは、ライトモード用の CSS ファイルを外部(Googleドライブ)に置いてるため読み込みが遅くなってしまうせいなんですが、この挙動ってなんとなく蛍光灯を点けた時の感じに似ててこれはこれで趣があっていいな思うんだけどどうでしょう？w

選択状態を保持させるのは JavaScript でクッキーを制御(ブラウザに記憶)させればできるらしいけど、調べてもいまいち理解できなかったので諦めましたw
ボタンもナビバーと一緒に着いてくるので、どの位置にいてもいつでも切り替えられるということで不便はないと思いますけど。

もし要望があれば改善も検討はしますが、私は現状で十分満足してますのであまり期待はしないでください(^^;


カスタマイズの詳細は

当ブログ独自のカスタマイズ箇所との兼ね合いもあり、あまり参考にならないと思いますので詳細は割愛します。
興味のある方はご自身で調べてトライしてみてくださいね。
無知な私でも出来たのでさほど難易度は高くないはずw


2021/04/10 追記: 別のスクリプトに変更しました

ライトモード導入方法に関して調べ始めた時、最初にこちらの記事を見つけて良さそうだなと思ったものの、ちょっと素人にはハードル高そうな気がして手も付けずに一旦パスしてたのですが、ダメ元でやってみたところ上手く出来そうだったのでこちらに乗り換えることにしました。

Qiita(@whike_chan さん)で紹介されているコードをベースにして、SANOGRAPHIX さんのカスタマイズ方法を参考に、カスタムプロパティで CSS を切り替えるようにしています。

ファビコンSANOGRAPHIX Blog
サムネイル
このブログをダークモードに対応する - SANOGRAPHIX Blog
なんとかは黒に染まれ、とかなんとか すでにお気づきの方もいらっしゃるかもしれないが、このブログにダークモードを追加した。
https://text.sanographix.net/entry/enable-dark-mode



ファビコンQiita
サムネイル
サイトにダークモード切り替えボタンを置こう - Qiita
https://qiita.com/whike_chan/items/3fff6d0c78fa74253d4d



当初のスクリプトとの仕様の違い


  1. prefers-color-scheme により初回訪問時は閲覧者のデバイスのモードに合わせてダーク/ライトが自動で切り替わる。
  2. 選択したモードはページ遷移やリロードしても保持される。(クッキー有効時)
  3. ライトモードの CSS も HTML 内にあるためボタンを押すと瞬時に切り替わる。
  4. ボタンを押すたびにとが回転して入れ替わる。(→回転を無効化させました)

1～3は理想通りの仕様にできて満足なんですが、4のボタンが回転するというちょっと癖のある挙動がなんか微妙な気もしなくはないですw
SANOGRAPHIX さんみたいなシンプルに切り替わるボタンにできたら最高なんですけど、スクリプトを弄って何とかするのは私にはまだ無理そうです(^^;
というわけで、回転させるための transition:transform を削除するという単純な方法で回転を無効化させましたw

当ブログ独自カスタマイズのコードとデモ

参考までにコードを載せておきます。
環境によって設置位置等も異なり、微調整やカスタムプロパティの設定も必要になりますので各自で対応してください。

HTML と CSS をだいぶ改造しています。
デモでは絵文字の🌙を使っていますが、何故か逆向き状態を直せませんでした(^^; 当ブログのような SVG なら transform: rotate(180deg) で正しい向きに直せます。

keyLocalStorage = 'fujilogicKey' の key の名前は任意のものに適宜変更してください。

CSS の以下の部分をコメントアウトか削除すると回転を無効化出来ます。

transition: transform 1s;

See the Pen Mode Switch Demo by Fujiyan (@fujiyanx) on CodePen.