前の記事の続きです。

やりたいことは変わらずで、cssの指定部分を一つだけ変更してテーマ全体を入れ替えることなんですが、さらに効率良くcssを書きたいということで工夫しました。

今回のバージョンはこちら。

See the Pen [第2弾]cssの一箇所を変更してtheme全体を入れ替えるサンプル by Makoto Ohnami (@zohnami) on CodePen.

前回は以下のような書き方で、テーマごとに各クラスの設定を書いていました。

これでもいいんですが、cssのクラスが増えてくるとメンテが一気にしんどくなります。

cssに書いているクラスや設定の数 x テーマ数 の数だけコードを調整しないといけなくなってしまいます。

実際にサービスでこうしたテーマ切り替えの機能を入れるとなると、cssのクラスが数百になる世界だと思うので、かなり辛い未来が予想されます。

カラーコードは仕方がないと思うのですが、background-colorとか、そういう枠の部分はできればひとつにしておきたい。

.theme-A {
  background-color: #e0ebaf;
}

.theme-A .box1 {
  background-color: #99ab4e;
}

ということで、この記事でアップしたサンプルはさらに進化しました。変更保守に強い改良版。

まず、.box1とかそういうクラスごとの設定は一箇所に集約。そしてvarでcssの変数を読み込むようにしておきます。

.box1 {
  background-color: var(--c-box1-bg-color);
}

.box2 {
  background-color: var(--c-box2-bg-color);
}

.box3 {
  background-color: var(--c-box3-bg-color);
}

.notice {
  color: var(--c-notice-color);
  font-weight: bold;
}

そして、ポイント。テーマでは変数の設定を変えるだけにします。

これは素晴らしい。一気に保守しやすくなりました！

あとはテーマごとに色の変数のみ変えたものを作ればOK。テーマも増やしやすいし、書きやすい。いいことずくめです。

使っている色の数だけ設定を書けばいいのでかなりスリムに書けると思います。

/* 変数のみをテーマごとでわける。見やすい */
.theme-A {
  background-color: #e0ebaf;  

  --c-box1-bg-color: #99ab4e;
  --c-box2-bg-color: #69821b;
  --c-box3-bg-color: #b0ca71;
  --c-notice-color: #6f4b3e;
}

今回は色のみを扱っていますが、他の数値や画像なんかも同様の方法でいけるはずです！

この記事の環境情報

  • Google Chrome 108.0.5359.124