BootstrapでOS設定に合わせたダークモード！初心者でもわかるprefers-color-scheme対応

1. prefers-color-schemeとは？

1. prefers-color-schemeとは？

prefers-color-scheme は、ユーザーがパソコンやスマートフォン（iOS/Android）のシステム設定で選んでいる「ライトモード」や「ダークモード」の情報を、ウェブサイト側がキャッチして自動でデザインを切り替えるためのCSSの仕組みです。

これはCSSの「メディアクエリ」という機能の一つです。メディアクエリは本来「画面の横幅」などによってデザインを変えるために使われますが、この prefers-color-scheme を使えば、「ユーザーがいま、暗い画面で見たいと思っているか」を判断基準にできます。

プログラミング未経験の方でも、「テレビの明るさ自動調節機能」のように、周りの環境やユーザーの好みに合わせてサイトが「おもてなし」をしてくれる機能だと考えれば分かりやすいでしょう。近年、目の疲れを軽減するためにダークモードを常用するユーザーが増えているため、この対応はモダンなウェブ制作において必須級のスキルとなっています。

仕組みを体験してみよう

以下のサンプルは、皆さんの端末（PCやスマホ）の設定を変えると、枠内の色が変わる仕組みです。コードの中にある (prefers-color-scheme: dark) という部分が、「もしダークモード設定だったら」という条件分岐の役割を果たしています。

<style>
    /* 通常時（ライトモード）のスタイル */
    .color-test-box {
        background-color: #f8f9fa;
        color: #212529;
        border: 2px solid #dee2e6;
        padding: 20px;
        border-radius: 8px;
    }

    /* OSがダークモード設定の時だけ適用されるスタイル */
    @media (prefers-color-scheme: dark) {
        .color-test-box {
            background-color: #343a40;
            color: #f8f9fa;
            border-color: #495057;
        }
    }
</style>

<div class="color-test-box">
    <p class="mb-0">OSの設定を切り替えると、ここの背景色と文字色が変わります！</p>
</div>

特別なJavaScript（プログラム）を書かなくても、CSSだけでこれほどスマートにユーザーの好みに寄り添えるのが prefers-color-scheme の最大の特徴です。

2. Bootstrapとダークモードの関係

2. Bootstrapとダークモードの関係

Bootstrap 5以降、Webデザインの常識は大きく変わりました。その核となるのが「CSS変数（カスタムプロパティ）」の全面採用です。 従来のBootstrapは色を変えるたびに複雑な設定が必要でしたが、現在は「色の設計図」とも言える変数を書き換えるだけで、一瞬でサイト全体の雰囲気を切り替えることができます。

ダークモード対応の鍵は、このCSS変数をシステムやブラウザの「ライト/ダーク設定」と連動させることにあります。 プログラミングが初めての方でも、「特定のルール（クラス名）をHTMLに書き足すだけで、Bootstrapが自動的に色の変数をダークモード用に差し替えてくれる」とイメージすればOKです。

<div class="p-4" data-bs-theme="dark">
    <div class="card shadow">
        <div class="card-body">
            <h5 class="card-title">ダークモードのカード</h5>
            <p class="card-text">
                このカードは、外側の要素に「data-bs-theme="dark"」を指定しているため、
                背景が暗く、文字が白く自動調整されています。
            </p>
            <button class="btn btn-primary">詳細を見る</button>
        </div>
    </div>
</div>

このように、Bootstrapの仕組みを理解しておけば、OSの設定（prefers-color-scheme）に合わせて自動で画面を暗くする「スマートなWebサイト」も、ほんの数行のコードで実現可能です。 次は、実際にこの機能をWebサイト全体に適用する方法を詳しく見ていきましょう。

3. 基本の書き方

3. 基本の書き方

まずは基本のCSSコードを書いてみましょう。ライトモード用とダークモード用を分けて記述します。

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

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-bg: #121212;
        --bs-body-color: #ffffff;
    }
}
</style>

<div class="p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    OS設定に応じてライトとダークが切り替わります
</div>

このコードでは、通常は白背景と黒文字、OSがダークモードの場合は黒背景と白文字になるように設定しています。

Windowsで変更する方法

設定 → 個人用設定 → 色 → 「モードを選ぶ」で「ライト」または「ダーク」を切り替えます。

Mac（macOS）で変更する方法

システム設定 → 外観 → 「ライト」「ダーク」を選びます。

iPhone / Androidで変更する方法

設定 → 画面表示と明るさ（またはディスプレイ設定） → 「ライトモード／ダークモード」を切り替えます。

4. ボタンの色をダークモード対応にする

4. ボタンの色をダークモード対応にする

背景や文字だけでなく、ボタンもダークモードに合わせて切り替えられます。Bootstrapの.btn-primaryをカスタマイズしてみましょう。

<style>
.btn-primary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
}
@media (prefers-color-scheme: dark) {
    .btn-primary {
        --bs-btn-bg: #ffaa66;
        --bs-btn-border-color: #ffaa66;
    }
}
</style>

<button class="btn btn-primary">ダークモード対応ボタン</button>

ライトモードでは元気なオレンジ色、ダークモードでは少し明るいオレンジ色に変わります。

5. 実際の使いどころ

5. 実際の使いどころ

この仕組みは、ブログ記事、会社のホームページ、商品紹介サイトなど、あらゆる場面で使えます。特に夜間にスマホを見る人にとって、ダークモード対応のサイトは目に優しく、滞在時間や好印象につながります。

また、SEO対策としても「ダークモード対応」というキーワードは注目されています。検索エンジンにヒットしやすくなるだけでなく、ユーザー体験の向上にもつながります。

6. 注意点

6. 注意点

ただし、すべてを自動で切り替えると「自分で選びたい」というユーザーの希望を奪ってしまう場合があります。そのため、prefers-color-schemeで自動切り替えしつつ、ユーザーが手動で切り替えるボタンを追加するのが理想的です。

初心者の方は、まずprefers-color-schemeを体験してみて、必要に応じて切り替えスイッチを追加するとよいでしょう。

まとめ

まとめ

今回の記事では、Bootstrap 5を活用しながら、OSの設定に連動して自動的にデザインを切り替える「prefers-color-scheme」の実装方法について詳しく解説してきました。ウェブデザインのトレンドとして、ユーザーの視聴環境に配慮した「ダークモード」への対応は、今や欠かせない要素となっています。特に夜間の閲覧や、有機ELディスプレイを搭載したスマートフォンでのバッテリー節約、そして何よりユーザーの目にかかる負担を軽減するという視点（アクセシビリティ）からも、ダークモード対応は非常に重要な役割を果たします。

実装のポイントは、CSSのメディアクエリを利用して、OSが提供する外観設定の情報をウェブブラウザがキャッチし、それに応じたCSS変数（カスタムプロパティ）を上書きすることです。Bootstrapは元々多くのコンポーネントでCSS変数を使用しているため、独自のスタイルを微調整するだけで、サイト全体の雰囲気をガラリと変えることが可能です。これにより、ライトモードでは清潔感のある白基調、ダークモードでは高級感や視認性を重視した暗色基調といった、柔軟なデザイン展開が容易になります。

さらに、検索エンジン最適化（SEO）の観点からも、ユーザー体験（UX）の向上はプラスに働きます。滞在時間の増加や直帰率の低下は、良質なコンテンツであると検索エンジンに評価される一つの指標です。「ダークモード対応」という付加価値をウェブサイトに持たせることで、競合サイトとの差別化を図り、より多くのユーザーに快適に閲覧してもらえる環境を整えていきましょう。

応用編：カードデザインのダークモード対応サンプル

ここでは、より実践的な例として、Bootstrapのカードコンポーネントをダークモードに対応させるコードを紹介します。画像やテキストの配置を含め、どのように見え方が変わるかを確認してみましょう。

<style>
/* デフォルト（ライトモード）の設定 */
.custom-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #212529;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.custom-card-body {
    padding: 20px;
}

/* ダークモード時の設定 */
@media (prefers-color-scheme: dark) {
    .custom-card {
        background-color: #2b3035;
        border-color: #495057;
        color: #f8f9fa;
    }
}
</style>

<div class="container mt-4">
    <div class="custom-card shadow-sm" style="max-width: 400px;">
        <img src="/img/sample150-100.jpg" class="w-100" alt="サンプル画像">
        <div class="custom-card-body">
            <h5 class="fw-bold">最新のウェブデザイントレンド</h5>
            <p>OSの設定に合わせた自動モード切り替えを実装することで、ユーザーにとって最も心地よい閲覧体験を提供します。</p>
            <button class="btn btn-outline-primary btn-sm">詳細を読む</button>
        </div>
    </div>
</div>

このように、画像の下に続くテキストエリアの背景色や境界線の色を細かく指定することで、ダークモード時でも違和感のない、洗練されたインターフェースを構築できます。特に文字色については、真っ白（#ffffff）よりも少しグレーがかった白（#f8f9faなど）を使うと、コントラストが強すぎず、より目に優しいデザインになります。

画像素材の活用とレイアウトの工夫

デザインのアクセントとして画像を使用する場合も、ダークモード時の見え方を意識しましょう。明るい画像はダークモード下で非常に目立つため、必要に応じてCSSの filter: brightness(80%); などを適用して少しトーンを落とすといったテクニックも有効です。

<style>
.profile-section {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    background-color: #f1f3f5;
}
@media (prefers-color-scheme: dark) {
    .profile-section {
        background-color: #1a1d20;
        color: #e9ecef;
    }
    .profile-img {
        filter: brightness(0.9);
    }
}
</style>

<div class="profile-section">
    <img src="/img/sample120-120.jpg" class="profile-img rounded-circle" width="60" height="60" alt="プロフィール">
    <div>
        <div class="fw-bold">開発者：ウェブ太郎</div>
        <div class="small">フロントエンドエンジニア。最新のBootstrap情報を発信中。</div>
    </div>
</div>

まとめとして、prefers-color-scheme は単なる色替えの機能ではなく、ユーザーへの「おもてなし」の心を表す手法です。複雑なJavaScriptを記述することなく、CSSだけでこれほど効果的な演出ができるのは大きなメリットです。ぜひ皆さんのプロジェクトでも、Bootstrapのクラスと組み合わせて積極的に導入してみてください。