ライトモードはじめました
一般的にはダークモードと呼ばれているやつですが、kk-web は元々ダークモードっぽい色調で組んでいたので、後追いでライトモードを追加する形になりました。
実は導入にかなーり苦戦しましたので、備忘録をば。
kk-web のスタイリングは、babel-plugin-react-css-modules と Sass の組み合わせで実装してあります。
今回のダークモードの導入において、動作フローは以下のような感じで実現しました。
- hooks で body の class 名を切り替える
- body の class によって css を切り替える
なるべくシンプルに実現したかったので、無難な手法を取り入れました。
元々以下の記事を参考にして実現しようと思っていたのですが。
Web のダークモード対応を SCSS 変数で管理する方法を考える
元の記事の下部にも書かれていますが、rgba などの関数を使用する場合、かなーり面倒くさい手順をかませる必要があり、途中で諦めてしまいました。
そもそも、自分のサイトはすべての色を定数で切ってはいるものの、ダークモードとライトモードで定数をゴリッと切り替えたらきれいに表示される、みたいなこともなく…。
結局 1 つ 1 つのプロパティを確認し、手動で切り替え用の mixin を噛ませるに留まりました。
実装のコツをいくつか書き残していくと。
モード切替用の hooks の導入
自分はパッケージを使用しました。
Next.js や Gatsby にも対応されているとのことなんですが、なぜかデフォルトがライトモードにしかならないんですよね…何か設定をミスっている可能性が…。
パッケージの導入後に自作の hooks 版を見つけました、こっちでも十分そうですね。
css modules をかませる場合
body に付与される class は css modules を挟まないため、グローバルスコープで指定する必要があります。
とはいえ、css modules の公式ドキュメントを読んでいれば詰まらないですね。
なのでこんな感じで書けば動きます。
.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 との噛み合わせがどうしても鬼門になってきますね。