クリックでテーマカラー変更

解説

パレットの色を押すと、見出しやボタンのアクセントカラーが一斉に切り替わる設定 UI です。仕掛けの中心は CSS カスタムプロパティ（変数）で、配色を --acc という一つの変数にまとめておきます。短い JavaScript が、押されたボタンの data-c に入った色を読み取り、root.style.setProperty で --acc を上書きします。色を参照している箇所はすべて変数経由なので、一度の書き換えで関連する見た目がまとめて変わります。

使う場面

テーマカラー設定、商品のカラーバリエーション選択、ブランドキットのプレビューなど、ユーザーに見た目を選ばせたい画面に向きます。選択中のボタンには is-on クラスで枠を付け、今どれを選んでいるかが一目で分かります。

• 色を増やす：パレットにボタンを足し data-c に色を書くだけで選択肢が増えます。
• 反映先：新たに色を効かせたい要素も var(--acc) で書けば、自動で連動します。
• 注意：CSS のみではこの一括切替は難しく、色の出し分けに短い JavaScript が必要です。選択状態を保存したい場合は別途記憶の仕組みを足します。