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

生徒

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

先生

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

生徒

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

先生

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

1. prefers-color-schemeとは？

prefers-color-scheme は、ユーザーがパソコンやスマートフォンで設定しているテーマ（ライト／ダーク）に応じて、ウェブサイトのデザインを切り替えるための仕組みです。これはCSSの「メディアクエリ」と呼ばれる機能の一種です。例えば、スマホの設定で「ダークモード」をオンにしている人には暗い背景のデザインを、自動的に表示することができます。

初心者の方でも難しく考えなくて大丈夫です。「OSの設定をウェブサイトが読み取って、自動で色を切り替えてくれる」と理解すればOKです。

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>

ブラウザ表示

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