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

prefers-color-schemeに対応：OS設定に追従するダークモード

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

生徒

「Bootstrapでダークモードを作りたいんですけど、自動で切り替えることってできますか？」

先生

「できますよ。最近のパソコンやスマートフォンは、OSの設定でライトモードやダークモードを選べます。その設定に合わせて自動で切り替える仕組みが prefers-color-scheme です。」

生徒

「へえ！じゃあ自分でボタンを押さなくても勝手に切り替わるんですか？」

先生

「そうです。ユーザーのOSがダークモードなら自動でダーク表示、ライトモードなら通常の明るい表示にできます。CSSだけで実現できるのでとても便利ですよ。」

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とダークモードの関係

Bootstrap 5はCSS変数（カスタムプロパティ）を使って色や背景を制御しています。このため、ダークモードにも対応しやすくなっています。特に、背景色や文字色をCSS変数で管理することで、テーマを切り替えるときに大きな効果を発揮します。

つまり、Bootstrapの基本的な仕組みを理解しておけば、prefers-color-schemeを使ったテーマ切り替えも簡単にできるようになります。

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. ボタンの色をダークモード対応にする

背景や文字だけでなく、ボタンもダークモードに合わせて切り替えられます。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>

ブラウザ表示

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