WEBサイトのテーマカラーをCSS変数で切り替える方法

WEBサイトの主要ボタンや案内枠を青から緑に変えたいとき、各パーツのCSSを1か所ずつ書き換えるのは大変です。CSS（WEBページの見た目を指定する言語）の「CSS変数」を使えば、色を役割ごとに定義し、切替条件に合わせてまとめて変更できます。ここでは、ボタン操作でサイトのテーマカラーを切り替える具体例を紹介します。

テーマカラーはCSS変数で役割ごとに定義する

CSS変数は、正確には「カスタムプロパティ」と呼ばれる仕組みです。--brandのように名前を付け、var(--brand)で別の場所から参照します。:rootはWEB文書の最上位の要素を指し、ここで定義した通常のCSS変数は下位の要素で利用できます。ボタン背景とボタン文字を別の変数にすると、配色を安全に見直しやすくなります。

まず、青を基準にした色を用意します。主要ボタンは■#1D4ED8、マウスを重ねたときの色は■#1E40AF、ボタン文字は■#FFFFFFです。案内枠には淡い青■#EFF6FFと濃い青の文字■#1E3A8Aを組み合わせます。HEX（「#」から始まる16進数のカラーコード）との対応を確認しやすいよう、以下のCSSではRGB（赤・緑・青を数値で表す色指定）を使用します。

:root {
  --brand: rgb(29 78 216);
  --brand-hover: rgb(30 64 175);
  --on-brand: rgb(255 255 255);
  --brand-soft: rgb(239 246 255);
  --on-brand-soft: rgb(30 58 138);
}

--brandは主要色、--brand-hoverはホバー時の色、--on-brandはその上の文字色です。--brand-softと--on-brand-softは、案内枠の背景と文字を対にして管理します。変数名を具体的な色名ではなく用途で決めておけば、青から緑に変えてもCSSの利用箇所を書き直さずに済みます。

data属性とボタン操作で青から緑へ切り替える

緑へ変更するときは、主要ボタンを■#166534、ホバー時を■#14532D、案内枠を■#F0FDF4、その文字を■#14532Dとします。ボタン文字の■#FFFFFFは共通で使用します。

次のように:root[data-brand="green"]で緑用の値を上書きします。data-brandはHTML要素に付ける独自の属性で、CSSから属性の値を条件にできます。各パーツはvar()で変数を参照するだけです。

:root[data-brand="green"] {
  --brand: rgb(22 101 52);
  --brand-hover: rgb(20 83 45);
  --brand-soft: rgb(240 253 244);
  --on-brand-soft: rgb(20 83 45);
}
.primary-button {
  background-color: var(--brand);
  color: var(--on-brand);
}
.primary-button:hover {
  background-color: var(--brand-hover);
}
.notice {
  background-color: var(--brand-soft);
  color: var(--on-brand-soft);
}

HTMLには切替ボタンと、色が変わる要素を置きます。切替ボタンにはフォーム送信を避けるtype="button"を指定します。

<button type="button" id="brand-switch">緑に切り替える</button>
<button type="button" class="primary-button">お問い合わせ</button>
<p class="notice">新着情報をお知らせします。</p>

クリックに応じて切り替えるには、JavaScript（利用者の操作に反応する処理を書く言語）が必要です。次のコードをHTMLのボタン要素が読み込まれた後で実行します。

const button = document.querySelector("#brand-switch");
button.addEventListener("click", () => {
  const root = document.documentElement;
  const next = root.dataset.brand === "green" ? "blue" : "green";
  root.dataset.brand = next;
  button.textContent = next === "green" ? "青に切り替える" : "緑に切り替える";
});

初期状態では:rootの青が使われ、クリックすると文書の最上位要素のdata-brandがgreenになります。もう一度押すとblueに戻り、緑用の上書きが適用されなくなります。ボタンの表示文字も次に選べる色を示すため、色だけに頼らず操作できます。

切り替え後は文字色と操作状態も確認する

色を切り替えたら、背景とその上の文字をセットで確認します。上記の主要ボタンで白■#FFFFFFの文字を使った場合、青■#1D4ED8とのコントラスト比は約6.70:1、緑■#166534とは約7.13:1です。ホバー時も青■#1E40AFで約8.72:1、緑■#14532Dで約9.11:1あります。

案内枠の文字と背景は、青系の■#1E3A8Aと■#EFF6FFで約9.52:1、緑系の■#14532Dと■#F0FDF4で約8.70:1です。これらはWCAG（WEBのアクセシビリティ指針）が通常サイズの文字に求める4.5:1を超えています。ただし、他の文字色や背景、画像の上で使う場合まで保証する数値ではありません。

実際のサイトでは、本文中のリンク、スマートフォンの固定ボタン、ホバー・フォーカス時の輪郭なども両方の色で確認してください。色を切り替えただけでは現在の選択状態が分からないため、ボタン名など文字による手掛かりも必要です。また、この例ではページを再読み込みすると初期の青に戻ります。選択を保存したい場合は、保存と読み込みの処理を別途追加します。