ときどき、ユーザーに好きな色なんかを選んでもらって画面の配色を変更できる、なんてサービスがあります。

たとえばTwitterは設定画面から、お好みの色を選んで全体の配色を変えることが可能です。

ほかにもブログサービスとかはごっそりと画面のテーマを差し替えできたりします。

そんなふうにユーザーにテーマを選んでもらいたいときの方法としてcssの指定部分を一つだけ変更してテーマ全体を入れ替えるサンプルを書いてみました。

ボタンを押すと、そのボタンに紐ついたテーマが適用され、背景色が変わります。

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

まず、htmlを見てみるとこんな感じ。ポイントがあります。

まず、全体を覆っているcontainerクラスのところにtheme-Aという形でデフォルトのテーマを指定します。

これを後からjsで切り替えます。この部分を切り替えるだけでOKにしておくのがミソ。

<div class="container theme-A">
  <div class="buttons">
    <button class="button button-A">
      Theme A
    </button>

<!-- 省略 -->

</div>

あとは、テーマごとの色設定をcssに書いておきます。

ここでもポイントはtheme-A、theme-B配下の各要素という指定の仕方で色の設定を書いているところです。

こうすることで、.theme-A配下の.box1はこの色、.theme-B配下の.box1はあの色といったようにそれぞれに設定することができます。

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

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

このcssの記述はsassでやるとさらに見やすくなっていい感じです。

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

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

今回は以下のようにjsでボタンのクリックイベントを拾ってテーマを変更しています。

const container = document.querySelector('.container')
const themeButtonA = document.querySelector('.button-A')
themeButtonA.addEventListener('click', () => {
  container.classList.add('theme-A')
  container.classList.remove('theme-B')
})

const themeButtonB = document.querySelector('.button-B')
themeButtonB.addEventListener('click', () => {
  container.classList.add('theme-B')
  container.classList.remove('theme-A')
})

jsじゃなくても、バックエンドでやることも可能です。<div class="container theme-A">のtheme-Aの部分を動的に変更すればOKですね。

このサンプルは色のみですが、形や幅なんかも変えることができるでしょう。

HTML内のクラス設定を全て差し替えるのは正直しんどい。

一箇所変えるだけで切り替わるのはとても楽で、ミスも減らせそうです！

続きができました

この記事の続編を書きました。より効率良く書けるやり方を見つけたのでこちらも一緒にご覧ください。

続・cssの一箇所を変更してテーマ全体を入れ替える

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • 今年の仕事がはじまった