BootstrapのユーティリティAPIでテーマ色を作る方法を徹底解説！初心者でもわかるダークモード入門

ユーティリティAPIでテーマ用ユーティリティ（色/背景）を生成

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

生徒

「Bootstrapでテーマカラーを作れると聞いたのですが、難しそうで不安です…。色や背景を自分で増やすことってできますか？」

先生

「Bootstrapには“ユーティリティAPI”という仕組みがあり、特別なプログラミングをしなくてもテーマ用の色や背景を増やせますよ。」

生徒

「パソコン初心者でもできるんでしょうか？ダークモードにも対応できますか？」

先生

「もちろんできます。HTMLだけで設定できるので、まずは簡単な例から一緒に進めてみましょう。」

1. BootstrapのユーティリティAPIとは？初心者向けに仕組みを徹底解説

Bootstrapの「ユーティリティAPI」とは、一言で言うと「自分専用の便利なデザインルール（クラス）を自由に追加・生成できる魔法のツール」のことです。通常、Bootstrapには背景色を変えるbg-primaryや、文字を太くするfw-boldといった便利なクラスが用意されています。しかし、「もっと自分好みの色や余白を使いたい」という場面も出てきます。そんな時に、CSSを何百行も書くことなく、設定を少し書き加えるだけで新しいクラスを自動生成してくれるのがこのAPIの凄さです。

プログラミング未経験の方でも、「料理のカスタマイズ」をイメージすれば簡単です。基本のレシピ（標準のBootstrap）に、自分だけの隠し味（ユーティリティAPIでの設定）を足すだけで、新しいメニュー（独自クラス）が出来上がる仕組みです。Sassなどの高度な知識がなくても、最近ではCSS変数（カスタムプロパティ）を組み合わせることで、HTMLとシンプルなスタイル指定だけで驚くほど柔軟にテーマカラーを拡張できるようになりました。まずは、基本となる「クラスを呼び出して色を変える」感覚を以下のサンプルで掴んでみましょう。


<style>
    /* ユーティリティAPIの考え方を応用した、独自カラーの定義例 */
    :root {
        --bs-custom-pink: #ff69b4; /* 自分だけのピンク色を定義 */
    }

    /* APIが自動生成するようなイメージでクラスを作成 */
    .text-custom-pink {
        color: var(--bs-custom-pink) !important;
    }

    .border-custom-pink {
        border: 5px solid var(--bs-custom-pink) !important;
    }
</style>

<div class="p-4 border-custom-pink rounded">
    <h3 class="text-custom-pink">独自ユーティリティの効果</h3>
    <p>このテキストは、ユーティリティAPIの仕組みを利用して追加した「ピンク色のクラス」で装飾されています。このように、標準機能にないデザインを簡単に追加できるのが最大のメリットです。</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid rounded">
</div>

ブラウザ表示

このように、ユーティリティAPIを理解すると「Bootstrapに用意された色しか使えない」という制限から解放されます。サイトのブランドカラーに合わせて、bg-brandやtext-accentといった自分専用のクラスを無限に作り出せるため、SEOに強い「独自性のある洗練されたデザイン」が誰でも最小限の手間で実現可能になります。

2. テーマ作成に必要な考え方を初心者向けに解説

Webサイトにおける「テーマ作成」とは、単に色を決める作業ではありません。サイト全体のブランドイメージを左右する「デザインの共通ルール」を作ることです。例えば、ボタンは青、背景は白、重要な文字は黒といった決まりをシステム全体に反映させることで、ユーザーにとって見やすく、信頼感のあるデザインが完成します。

Bootstrap 5.3からは、このテーマ管理が劇的に進化しました。最大の特徴は、data-bs-themeという属性を1つ書き換えるだけで、「ライトモード（明るい画面）」と「ダークモード（暗い画面）」を瞬時に切り替えられる点です。これは、iPhoneやAndroidのシステム設定で画面の明るさを変えるのと全く同じ感覚で操作できます。プログラミング未経験の方でも、まずは「色のセットを丸ごと入れ替えるスイッチがある」とイメージすればOKです。

初心者が押さえるべき2つのポイント

一貫性： ページごとに色を変えず、Bootstrapが用意した共通の色名（primary, secondaryなど）を使うこと。
拡張性： 最初からライト・ダーク両方の見え方を意識しておくことで、将来的な修正コストを大幅に減らせます。

【実践例】テーマ切り替えの仕組みを見てみよう

以下のサンプルは、最もシンプルな「ダークモード」の適用例です。<html>タグや親要素の<div>にdata-bs-theme="dark"と書き加えるだけで、中の文字色や背景が自動的に調整されます。


<div data-bs-theme="dark" class="p-4 border rounded bg-dark">
    <h1 class="h4 text-light">ダークテーマのサンプル</h1>
    <p class="text-secondary">
        このエリアにはダークモードが適用されています。<br>
        Bootstrapが自動で「背景は暗く、文字は明るく」調整してくれるため、細かい色設定は不要です。
    </p>
    <button type="button" class="btn btn-primary">
        メインのボタン
    </button>
    <button type="button" class="btn btn-outline-light ms-2">
        サブボタン
    </button>
</div>

ブラウザ表示

このように、Bootstrapのテーマ機能を活用すれば、個別にCSS（デザインの指示書）を何百行も書く必要はありません。決められたキーワードを使うだけで、プロのような整ったデザインを実現できるのが、テーマ作成の最大のメリットです。

3. data-bs-themeでライトモードとダークモードを切り替える仕組み

Bootstrap 5.3以降、Webサイトの「見た目の色（カラーモード）」を切り替えるのが驚くほど簡単になりました。その鍵を握るのがdata-bs-themeという属性です。

プログラミング未経験の方でも、HTMLのタグの中にdata-bs-theme="dark"と1つ書き足すだけで、背景が黒く、文字が白くなる「ダークモード」へ瞬時に変更できます。これはBootstrapの内部で、背景色や文字色の設定（CSS変数）が自動でダークモード用に上書きされるためです。本来なら何十行も書かなければならない色の設定を、たった1行の属性で制御できるのが最大のメリットです。

まずは、特定のエリアだけをダークモードにする最もシンプルなサンプルを見てみましょう。


<div data-bs-theme="dark" class="p-4 border rounded shadow-sm">
    <h3 class="mb-3">ダークモードのボックス</h3>
    <p>Bootstrapの標準機能を使っているので、背景は深いグレーに、文字は読みやすい白に近い色に自動調整されています。</p>
    <button class="btn btn-outline-light">詳細を見る</button>
</div>

<div class="p-4 border rounded shadow-sm mt-3">
    <h3 class="mb-3">通常のライトモード</h3>
    <p>こちらは何も指定していない状態です。標準の白い背景に黒い文字で表示されます。</p>
    <button class="btn btn-primary">詳細を見る</button>
</div>

ブラウザ表示

この仕組みを使えば、ページ全体をダークモードにしたい場合は<html>タグや<body>タグに属性を追加し、部分的に雰囲気を変えたい場合は上記サンプルのように<div>タグなどに指定するだけでOKです。専門的な色のコード（#ffffffなど）を覚える必要がないため、初心者の方でもデザインの幅がぐっと広がります。

次は、この仕組みをさらに活用するために、実際にコードをどのように書き換えていくか、より具体的な手順を確認していきましょう。

4. ユーティリティAPIでテーマ色を追加する仕組みを知ろう

Bootstrapの「ユーティリティAPI」とは、一言でいうと「自分専用の便利なクラスを自動生成してくれる魔法のリスト」です。通常、Bootstrapには text-primary（青）や bg-success（緑）といった標準の色が用意されていますが、Webサイトを作っていると「もう少し優しいピンクを使いたい」「企業のロゴに合わせた独自の紺色が欲しい」といった場面が出てきます。

このAPIを使う最大のメリットは、CSSファイルを一行ずつ手書きしなくても、設定ファイルに「色名」と「カラーコード」を登録するだけで、text-mycolor や bg-mycolor といったクラスがどこでも使えるようになる点です。これはまるで、既製品の絵の具セットに、自分のお気に入りの特製カラーを一本追加して、いつでもパレットに出せるようにする感覚に似ています。

初心者向けのポイント： プログラミングの知識がなくても、「この名前（例：sun）で、この色（例：#ffaa00）を作る」という設定情報を渡すだけで、文字色・背景色・枠線の色など、関連するクラスがまとめて作成されます。

具体的な活用イメージ

例えば、独自の「サンセット（夕焼け）」という色をテーマに追加したい場合、一度設定してしまえば、以下のように直感的なクラス名でHTMLに記述できるようになります。専門的なCSSの記述（プロパティや値の指定）を繰り返す必要がなくなり、管理が劇的に楽になります。


<style>
/* 実際にはSassのAPIで生成されますが、ブラウザ表示用にCSSで再現しています */
.text-sunset {
    color: #ff4500 !important;
}
.bg-sunset {
    background-color: #ff4500 !important;
    color: #fff;
}
.border-sunset {
    border: 2px solid #ff4500 !important;
}
</style>

<div class="p-3 mb-2 bg-sunset rounded">
    これは独自テーマ色「sunset」の背景クラスです（bg-sunset）
</div>
<p class="text-sunset fw-bold">
    これは独自テーマ色「sunset」の文字色クラスです（text-sunset）
</p>
<div class="p-2 border border-sunset">
    枠線にも独自の色を適用できます（border-sunset）
</div>

ブラウザ表示

このように、ユーティリティAPIを理解することで、Bootstrapの便利さを活かしたまま、世界に一つだけのオリジナルブランドカラーを持ったWebサイトを効率的に構築できる仕組みが整います。

5. CDNでユーティリティAPIを使ってテーマ色を追加する方法

Bootstrapでは、CDN環境でもユーティリティAPIを簡単に使えます。ユーティリティAPIはCSS変数を使って動くため、HTMLの中で:rootに色変数を書くだけでOKです。

下のサンプルでは、オリジナルの「myblue」というテーマ色を作り、背景色と文字色のユーティリティとして使えるようにしています。


<style>
    :root {
        --bs-myblue: #4a90e2;
        --bs-sun: #ffcc33;
    }

    .bg-myblue {
        background-color: var(--bs-myblue) !important;
    }

    .text-sun {
        color: var(--bs-sun) !important;
    }
</style>

<div class="p-3 bg-myblue text-white">
    オリジナルテーマ色の背景です
</div>
<p class="text-sun">オリジナルの文字色です</p>

ブラウザ表示

6. オリジナルテーマをダークモードにも対応させる方法

ダークモード用のテーマを作るには、data-bs-theme="dark"のときに使われる色変数を書くだけでOKです。これは、ライトモードとダークモードで別々の色鉛筆を用意するイメージです。


<style>
    :root {
        --bs-myblue: #4a90e2;
    }

    [data-bs-theme="dark"] {
        --bs-myblue: #1e64a8;
    }

    .bg-myblue {
        background-color: var(--bs-myblue) !important;
    }
</style>

<div data-bs-theme="light" class="p-3 bg-myblue text-white mb-2">
    ライトモードの背景色
</div>
<div data-bs-theme="dark" class="p-3 bg-myblue text-white">
    ダークモードの背景色
</div>

ブラウザ表示