Bootstrapで学ぶダークモード対応！初心者でもできる画像とロゴの切替ガイド

1. Bootstrapのダークモードとは何かをやさしく理解しよう

1. Bootstrapのダークモードとは何かをやさしく理解しよう

Bootstrapのダークモードは、Webサイト全体の配色をボタン一つで「明るい色（ライト）」から「暗い色（ダーク）」へ切り替えることができる非常に便利な仕組みです。2026年現在のWebデザインにおいて、ユーザーの目への負担を軽減する「目に優しい設計」は必須となっており、Bootstrapを使えば複雑なプログラミングの知識がなくても、最新のトレンドに合わせたUI（ユーザーインターフェース）を構築できます。

具体的には、HTMLのタグにdata-bs-theme="dark"という一言を追加するだけで、背景が黒系に、文字が白系に自動で変化します。これにより、夜間のブラウジングや暗い場所での操作性が飛躍的に向上します。プログラミングに慣れていない方でも、まずは「着せ替え機能」のような感覚で取り入れることができるのが最大の特徴です。

<div class="p-4" data-bs-theme="dark" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    <h3>ダークモードが適用されたエリア</h3>
    <p>このように、背景が暗くなり文字が白く反転します。</p>
    <button class="btn btn-primary">青色のボタン</button>
</div>

しかし、ここで一つ注意点があります。背景色が暗く変わっても、ページ内に配置した「画像」や「ロゴ」の色は自動では変わりません。例えば、黒色のロゴを配置していた場合、背景も黒くなるとロゴが同化して消えてしまったように見えてしまいます。せっかくのサイトデザインが崩れないよう、次章から紹介するテクニックを使って、背景色に合わせて画像も賢く切り替えていきましょう。

2. 画像の色を変えてダークモードに合わせるfilterの使い方

2. 画像の色を変えてダークモードに合わせるfilterの使い方

画像の色を変えるために便利なのがCSSの「filter」です。filterとは、画像に色調補正をする機能で、写真を白黒にしたり、色を反転させたりできます。ダークモードでは、明るい背景用の画像をそのまま使うと目立たないことがあります。filterを使うと色を反転して視認性を上げることができます。

<style>
img.dark-invert {
    filter: invert(1);
}
</style>

<img src="/img/common/logo-moku.png"  width="80px" class="dark-invert" alt="ロゴ">

filterでinvertを使うと、色が反転し、白いロゴを黒背景でも見やすくできます。ただし、写真や複雑な画像には不向きな場合があるため、ロゴやアイコンに使うのがおすすめです。

3. ダークモードとライトモードで画像を切り替える方法（source切替）

3. ダークモードとライトモードで画像を切り替える方法（source切替）

Bootstrapのダークモードでは、明るい画像と暗い画像を切り替える方法がとても便利です。「source切替」という方法では、ライトモードとダークモードで別々の画像を読み込むことができます。写真や色の多い画像はfilterではきれいに変換できないため、この切替方法が役立ちます。

<picture>
    <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
    <img src="/img/common/logo-moku.png"  width="80px" alt="ロゴ">
</picture>

この仕組みでは、利用者のブラウザがダークモードかどうかを自動的に判断し、適切な画像を表示します。初心者でも扱いやすく、画像を自由にデザインできるため、ブランドロゴや商品写真に向いています。

4. SVGロゴを使うと色変更が自由自在になる

4. SVGロゴを使うと色変更が自由自在になる

SVGとは、拡大しても画質が落ちない画像形式のことで、ロゴやアイコンに最適です。ふつうの画像と違って、色をCSSで変えられるため、ダークモードとの相性がとてもよいです。Bootstrapのテーマ作成でもよく使われます。

<style>
.logo-svg {
    fill: black;
}
[data-bs-theme="dark"] .logo-svg {
    fill: white;
}
</style>

<svg class="logo-svg" width="120" height="40" viewBox="0 0 120 40">
    <rect width="120" height="40" rx="5"></rect>
</svg>

SVGは色を変えたり形を変えたりできる柔軟な画像なので、サイト全体の雰囲気を統一したいときにとても便利です。白い背景でも黒い背景でもはっきり見せられるため、ダークモードでの読みやすさが大きく向上します。

5. Bootstrapのテーマ作成とダークモード運用のポイント

5. Bootstrapのテーマ作成とダークモード運用のポイント

Bootstrapでテーマを作成するときは、画像やロゴの見え方を確認しながら配置することが大切です。ライトモードでは明るい色のロゴがきれいに見えても、ダークモードでは背景に溶け込んでしまうなど、配色の関係で見づらくなる場合があります。

初心者は「filter」「source切替」「SVG塗り」の三つを知っておくだけで、十分にきれいなダークモード対応ができます。特に、Bootstrapのdata-bs-themeを使うと、HTML上でテーマを切り替えるだけで見た目を変更できるため、管理が簡単になります。

画像の見え方は利用者の環境によって変わるため、画面の明るさやディスプレイの種類なども意識して調整すると、より利用者に親切なサイトになります。少しずつ改善しながら仕上げることで、初心者でも高品質なデザインを作れるようになります。