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

生徒

「Bootstrapでダークモード対応をしたいんですが、ライトモードとダークモードで色を分けるのって大変そうです。どうやったら効率よく作れますか？」

先生

「いい質問ですね。実は、Sass変数をうまく使うことで、ライトとダークの両方に対応できる共通の仕組みを作れるんです。変数を中心に設計すると、あとから色を変えるのもとても簡単になりますよ。」

生徒

「Sass変数って、CSSでいう変数とは違うんですか？」

先生

「Sass変数はコンパイル前に値を置き換える仕組みです。一方、CSS変数はブラウザ上でリアルタイムに切り替えられるんです。Bootstrapでは両方を組み合わせることで、ライト/ダークを切り替える共通設計が可能になります。」

1. ダークモードに対応したデザインが必要な理由

最近のWebサイトやアプリでは、ライトモードだけでなくダークモード対応が求められるようになっています。スマートフォンの設定やユーザーの好みに合わせて自動的に切り替わることも増えてきました。

ダークモードは、画面を暗めにすることで目の疲れを軽減したり、バッテリー消費を抑えたりする効果があります。そのため、Bootstrapを使うときもダークモード対応を考えた変数設計がとても大切になります。

2. Sass変数でライト/ダークを共通管理する考え方

ライトモードとダークモードを別々に作ると、コードが二重に増えてしまいます。そこでおすすめなのが「共通のSass変数を定義して、ライトとダークで値だけを切り替える」方法です。

例えば、$body-bgという変数を使うときに、ライトモードでは白、ダークモードでは黒を指定するだけで、背景色を簡単に切り替えられます。

この仕組みを使えば、全体の設計がシンプルになり、保守もしやすくなります。

3. 実際のSass変数とCSS変数の組み合わせ例

ここでは、Bootstrapの変数を使って、ライト/ダーク共通のスタイルを作る例を紹介します。


<style>
    :root {
        --bs-body-bg: #ffffff;  /* ライトモードの背景 */
        --bs-body-color: #212529; /* ライトモードの文字色 */
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --bs-body-bg: #121212;  /* ダークモードの背景 */
            --bs-body-color: #f8f9fa; /* ダークモードの文字色 */
        }
    }
    body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }
</style>

<body>
  <h1>ダークモード対応の見出し</h1>
  <p>このテキストはライト/ダークの両方で読みやすく表示されます。</p>
</body>