ライトモードはじめました

2020-07-24

一般的にはダークモードと呼ばれているやつですが、kk-web は元々ダークモードっぽい色調で組んでいたので、後追いでライトモードを追加する形になりました。

実は導入にかなーり苦戦しましたので、備忘録をば。


kk-web のスタイリングは、babel-plugin-react-css-modules と Sass の組み合わせで実装してあります。

今回のダークモードの導入において、動作フローは以下のような感じで実現しました。

  1. hooks で body の class 名を切り替える
  2. body の class によって css を切り替える

なるべくシンプルに実現したかったので、無難な手法を取り入れました。

元々以下の記事を参考にして実現しようと思っていたのですが。

Web のダークモード対応を SCSS 変数で管理する方法を考える

元の記事の下部にも書かれていますが、rgba などの関数を使用する場合、かなーり面倒くさい手順をかませる必要があり、途中で諦めてしまいました。

そもそも、自分のサイトはすべての色を定数で切ってはいるものの、ダークモードとライトモードで定数をゴリッと切り替えたらきれいに表示される、みたいなこともなく…。

結局 1 つ 1 つのプロパティを確認し、手動で切り替え用の mixin を噛ませるに留まりました。

実装のコツをいくつか書き残していくと。

モード切替用の hooks の導入

自分はパッケージを使用しました。

use-dark-mode

Next.js や Gatsby にも対応されているとのことなんですが、なぜかデフォルトがライトモードにしかならないんですよね…何か設定をミスっている可能性が…。

パッケージの導入後に自作の hooks 版を見つけました、こっちでも十分そうですね。

useDarkMode

css modules をかませる場合

body に付与される class は css modules を挟まないため、グローバルスコープで指定する必要があります。

とはいえ、css modules の公式ドキュメントを読んでいれば詰まらないですね。

Exceptions

なのでこんな感じで書けば動きます。

.hoge { :global(.dark-mode) & { color: red; } color: blue; }

mixin 化すれば楽

上記の記述を見れば一目瞭然ですが、mixin にしてやれば保守性が上がりますね。

@mixin dark-mode { :global(.dark-mode) & { @content; } }
.hoge { @include dark-mode { color: red; } color: blue; }

ここまで書いてやれば、コンポーネント志向も相まって比較的対応も楽です。

ssr の考慮

サイトに来られるたびに モード が初期値に戻られるとイヤなのですが。

ssr の場合 localstorage が使用できないため、どうやって対応するのやら…もう少し調査が必要そうです。


styled-components であればもう少し対応も楽なのかなーと、provider で theme を流し込むだけですし。

やはり css ファイルを使用する場合は、js との噛み合わせがどうしても鬼門になってきますね。

© 2018 kk-web