先生と生徒の会話形式で理解しよう

生徒

「今あるWebサイトをBootstrapのテーマ切り替えに対応させたいのですが、全部作り直さないといけませんか？」

先生

「全部作り直す必要はありませんよ。既存サイトでも段階的にテーマ対応へ移行する方法があります。Bootstrapの仕組みを少しずつ取り入れれば、無理なくテーマ化できます。」

生徒

「段階的というのは、どのように進めるんでしょうか？」

先生

「最初は“色の管理をCSS変数に置き換えるところ”から始めるのがポイントです。今の見た目そのままでも移行できるので、初心者でも安心して進められますよ。」

1. 既存サイトをテーマ対応にする考え方とは？

Bootstrapでテーマを切り替えられるようにするには、まず「色や背景などのデザインを変えられる仕組み」をサイトに取り込む必要があります。既存サイトの見た目を壊さずにテーマ化するためには、元の色をCSS変数という“色の箱”に入れて管理する考え方が重要です。

色をCSS変数にまとめておくと、テーマごとに色のセットを簡単に切り替えられます。たとえばライトテーマでは白い背景、ダークテーマでは黒い背景というように、同じ名前の変数に別々の色を割り当てるだけでデザインを変更できます。これにより、既存デザインの破壊を防ぎながらテーマ対応が行えます。

2. 段階的にテーマ対応するための3ステップ

既存サイトを一気にテーマ対応しようとすると、どこを変えればいいのか混乱してしまいます。そこでBootstrapの思想に合わせて、段階的な移行を行うことで、初心者でも無理なくテーマ化できます。ここでは簡単な3ステップで説明します。

ステップ1：既存の色をCSS変数にまとめる
色ごとに変数を作り、今のサイトの色をそのまま変数に格納します。

ステップ2：テーマ用の属性（data-bs-theme）を追加
HTMLタグにテーマを切り替えるための属性を追加します。

ステップ3：別テーマ用の色セットを後から追加
ライトテーマ、ダークテーマ、ブランドテーマなどの色セットを後から定義すると移行がスムーズです。

3. 実際に既存サイトをテーマ化するためのコード例

ここでは、既存サイトの色をCSS変数に置き換え、後からテーマ切り替えに対応できるようにする最も基本的な例を紹介します。まずは元の色を変数化し、次にライトテーマとダークテーマを切り替えられる形にしています。


<style>
/* 既存サイトの元の色をCSS変数化（ライトテーマ） */
.theme-root {
    --site-bg: #ffffff;
    --site-text: #212529;
    --site-accent: #0d6efd;
}

/* ダークテーマ用の色セット（後から追加） */
.theme-root[data-bs-theme="dark"] {
    --site-bg: #1c1c1c;
    --site-text: #f1f1f1;
    --site-accent: #66b2ff;
}

/* 既存CSSを書き換える代わりに変数を参照 */
.theme-root {
    background-color: var(--site-bg);
    color: var(--site-text);
}

.theme-root a {
    color: var(--site-accent);
}
</style>

<!-- div をテーマルートとして扱う（これで確実に動く） -->
<div class="theme-root p-4" data-bs-theme="dark">
    <h2>テーマ対応後の表示例</h2>
    <p>既存サイトの色をCSS変数に置き換えておくことで、ライトとダークを後から切り替えできます。</p>
    <a href="#">リンクのアクセントカラーも切り替わります</a>
</div>

ブラウザ表示