CSS変数でテーマ切替を完全ガイド！Bootstrapでライトとダークを一瞬でスイッチする実装

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

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

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

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

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

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

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

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. ボタンでライト/ダークを切り替える方法

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のボタンやテキストもテーマ対応させる

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>

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

6. 実運用で気を付けたいポイント

6. 実運用で気を付けたいポイント

実際に運用する場合、以下の点に注意するとスムーズにテーマを導入できます。

• CSS変数を使うと色を一括管理できるので、後から配色を変更するときも楽になります。
• ライト/ダークでコントラスト（明暗の差）を意識することが大切です。見やすさが失われないように配慮しましょう。
• テーマ切替の状態をユーザーごとに保存したい場合は、JavaScriptでローカルストレージに記録する方法もあります。

7. 初心者でもできるCSS変数×Bootstrapによるテーマ切替のポイント

7. 初心者でもできるCSS変数×Bootstrapによるテーマ切替のポイント

CSS変数とBootstrapを組み合わせることで、複雑なSassの設定や特別なビルド環境を用意しなくても、シンプルな構成でテーマ切替を実装できます。 背景色や文字色、ボタンカラーなどをCSS変数として定義しておけば、ライトモードとダークモードの切替も一瞬で反映されるため、管理やメンテナンスが非常に楽になります。

初心者の場合でも、数行のCSSと最低限のJavaScriptを書くだけで、最近よく見かけるダークモード対応サイトを作成できます。 Bootstrapの既存デザインを活かしながらテーマを切り替えられるため、見た目の統一感を保ちつつ、ユーザーにとって使いやすいWebサイトを構築できるのが大きなメリットです。

まとめ

まとめ

ここまで、CSS変数とBootstrapを使ったライトモードとダークモードのテーマ切替について、基礎から実践まで順番に学んできました。CSS変数を使う最大のメリットは、色やデザインの設定を一か所で管理できる点です。背景色や文字色、ボタンカラーなどを直接指定するのではなく、変数として定義することで、デザイン変更やテーマ切替が非常に簡単になります。特にBootstrapと組み合わせることで、既存のコンポーネントデザインを活かしながら、柔軟なテーマ対応が可能になります。

ライトモードとダークモードの切替は、見た目をおしゃれにするだけでなく、ユーザー体験の向上にも直結します。明るい環境ではライトモード、暗い環境ではダークモードを好むユーザーは多く、CSS変数によるテーマ切替は、現代のWebサイト制作では欠かせないテクニックの一つと言えます。今回紹介したdata-theme属性を使う方法は、HTML構造を大きく変える必要がなく、初心者にも取り入れやすいのが特徴です。

また、JavaScriptを使ってボタン操作でテーマを切り替える方法も学びました。難しいロジックは必要なく、属性の有無を切り替えるだけでテーマ変更が実現できる点は、CSS変数ならではの強みです。さらに応用として、ローカルストレージを使えば、ユーザーが選択したテーマを保存し、次回アクセス時にも同じテーマを表示することができます。これは実運用のWebサイトでは非常に重要なポイントになります。

Bootstrapのボタンやテキストに対してもCSS変数を活用することで、テーマごとに配色を切り替えられるようになります。これにより、サイト全体の統一感を保ちながら、ライトモードとダークモードの両立が可能になります。CSS変数、Bootstrap、JavaScriptを組み合わせることで、拡張性が高く、メンテナンスしやすいテーマ切替設計が完成します。

まとめ用サンプルプログラム

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

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

.summary-area {
    padding: 20px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
</style>

<div id="summaryArea" class="summary-area">
    CSS変数とBootstrapを使ったテーマ切替まとめ表示
</div>

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

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