Bootstrapでダークモードを前提とした変数設計！ライト/ダーク共通Sassの作り方を初心者向けに解説

ダークモード前提の変数設計：ライト/ダーク共通Sassの作り方

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

生徒

「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>

4. 共通Sass設計のメリット

ライト/ダーク共通のSass設計には、以下のようなメリットがあります。

変数を変更するだけでテーマ全体を切り替えられる
デザインが統一され、ライト/ダーク両方で整った見た目になる
メンテナンスが簡単になり、後から色を変えるのも容易

これは、服のサイズを変えるときに「全員分の制服を一度に調整できる」のと同じです。変数を変えるだけでサイト全体に統一感を出せるのは大きな利点です。

5. 初心者が試すときの工夫

初心者がダークモード対応の変数設計を試すときは、まずは背景色と文字色だけを切り替えるところから始めると理解しやすいです。その後、ボタンやリンク色などを少しずつ増やしていくと混乱せずに進められます。

また、検索エンジン対策として「Bootstrap ダークモード Sass 変数共通設計」といったキーワードを記事に含めることで、学習中の初心者にも見つけてもらいやすくなります。

まとめ

ダークモードを前提にしたBootstrap変数設計の考え方

ここまで、Bootstrapでダークモードを前提とした変数設計について学んできました。ライトモードとダークモードを別々に作るのではなく、Sass変数とCSS変数をうまく組み合わせて共通化することで、デザインの管理が非常に楽になることが分かったと思います。Bootstrapはもともと変数設計がしっかりしているため、その仕組みを理解して活用することで、初心者でも無理なくダークモード対応を進められます。

特に重要なのは「色そのものを直接使わない」という意識です。背景色、文字色、リンク色などを直接指定するのではなく、意味を持った変数を通して管理することで、ライトモードとダークモードの切り替えが簡単になります。これにより、デザインの一貫性が保たれ、後から修正が必要になった場合でも、最小限の変更で対応できるようになります。

共通設計を意識したシンプルなサンプル

以下は、記事内容を踏まえたまとめとしてのシンプルなサンプルです。Bootstrapの基本的なclassを使いながら、ライトモードとダークモードで共通の変数設計を行っています。背景色と文字色を中心に設計することで、全体の見た目が自然に切り替わるようになっています。


<style>
    :root {
        --bs-body-bg: #ffffff;
        --bs-body-color: #212529;
        --bs-card-bg: #f8f9fa;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --bs-body-bg: #121212;
            --bs-body-color: #f1f3f5;
            --bs-card-bg: #1e1e1e;
        }
    }
    body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }
</style>

<div class="card p-3 mb-3" style="background-color: var(--bs-card-bg);">
    <h5 class="card-title">ダークモード共通設計カード</h5>
    <p class="card-text">
        ライトモードとダークモードの両方で、読みやすさを保った表示になります。
    </p>
    <a href="#" class="btn btn-primary">ボタン</a>
</div>

ブラウザ表示

このように、共通の変数を定義しておくことで、カードやボタンなどのBootstrapコンポーネントも自然にライトモードとダークモードへ対応できます。背景や文字色だけでなく、境界線や影なども同じ考え方で拡張していくと、より完成度の高いデザインになります。Bootstrap ダークモード変数設計を理解することは、実務でも役立つ重要なスキルです。