1. CSS変数とは？初心者向けに解説

CSS変数とは、スタイルシートで繰り返し使う色やサイズを「変数」という形で保存しておける機能です。変数を設定しておくと、デザインを変更したいときに変数の値を変えるだけで、サイト全体のデザインを一括で変更できます。例えば、背景色を指定するときに直接「白」と書くのではなく、変数--bs-body-bgを使って「白」と登録しておけば、後から一か所書き換えるだけで済みます。

2. ライトモードとダークモードの基本設計

Bootstrapでは、標準でライトモード（白背景・黒文字）が使われます。ここにCSS変数を活用して、ダークモード（黒背景・白文字）も同時に定義することで、ユーザーの好みに応じて切り替えられるようにできます。重要なのは、「ライト」と「ダーク」の両方を同じCSSファイルに書いておくことです。切り替えはdata-themeという属性を使って実現します。

3. 実際のテーマ切替のCSSコード例

以下のコードでは、:root（ルート要素）にライトモードの色を定義し、[data-theme="dark"]の中でダークモード用の色を上書きしています。


<style>
:root {
    --bs-body-bg: #ffffff;  /* ライト背景 */
    --bs-body-color: #000000; /* ライト文字色 */
}

[data-theme="dark"] {
    --bs-body-bg: #121212;  /* ダーク背景 */
    --bs-body-color: #ffffff; /* ダーク文字色 */
}
</style>

<div id="themeArea" data-theme="dark" class="p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    テーマ切替のテストコンテンツ
</div>

ブラウザ表示

この時点で、data-theme属性を切り替えれば、背景色と文字色が瞬時に入れ替わります。

4. ボタンでライト/ダークを切り替える方法

実際のサイトでは、ユーザーがクリックしてテーマを切り替える仕組みを作ることが多いです。JavaScriptをほんの少し書くだけで、data-themeを切り替えることができます。


<style>
:root {
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
}
[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #ffffff;
}
</style>

<div id="themeArea" class="p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    ボタンでテーマを切り替えてみましょう
</div>

<button id="switchBtn" class="btn btn-primary mt-3">テーマ切替</button>

<script>
const btn = document.getElementById("switchBtn");
const area = document.getElementById("themeArea");
btn.addEventListener("click", () => {
  if (area.getAttribute("data-theme") === "dark") {
    area.removeAttribute("data-theme");
  } else {
    area.setAttribute("data-theme", "dark");
  }
});
</script>

ブラウザ表示

このように、ボタンを押すたびにライトモードとダークモードが切り替わります。

5. Bootstrapのボタンやテキストもテーマ対応させる

単純に背景と文字色だけを切り替えるだけでなく、Bootstrapのボタンや見出しにもテーマカラーを反映できます。例えば、プライマリーボタンをライトモードではオレンジ、ダークモードでは少し淡いオレンジに切り替えるように設定することも可能です。


<style>
:root {
    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
}

[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #ffffff;
}

/* ボタンの色を直接指定 */
.btn-primary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
}
[data-theme="dark"] .btn-primary {
    --bs-btn-bg: #ffaa66;
    --bs-btn-border-color: #ffaa66;
}
</style>

<div id="themeArea" class="p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    <button class="btn btn-primary">テーマ対応ボタン</button>
</div>

ブラウザ表示

これで、背景や文字色だけでなく、ボタンの見た目もテーマに合わせて変化させられます。