Bootstrapでダーク／ライト切り替えを滑らかに！初心者でもわかるアニメーションとprefers-reduced-motion対応

ダーク/ライトのアニメーション切替：prefers-reduced-motion配慮

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

生徒

「Bootstrapでライトテーマからダークテーマに切り替えると、色が急に変わってびっくりしませんか？」

先生

「確かに、背景が一瞬で黒くなると目が疲れることがありますね。でもCSSのアニメーションを入れると、ふわっと滑らかに切り替えられますよ。」

生徒

「でも、アニメーションが苦手な人もいると聞きました。そういう人にはどう対応するんですか？」

先生

「そこで重要なのが prefers-reduced-motion というアクセシビリティ機能です。動きを少なくしたい利用者には、自動でアニメーションを抑えることができます。」

1. ダーク／ライト切り替えのアニメーションとは？

Bootstrapのテーマ切替は、data-bs-theme 属性を使って色を切り替える仕組みになっています。ライトテーマでは白背景、ダークテーマでは黒背景をCSS変数で切り替えられるため、初心者でも簡単にテーマ対応できるのが特徴です。

しかし、その切り替えが「カチッ」と一瞬で起こると視覚的に強すぎる場合があります。そこで、CSSの transition を使って、色がゆっくり変わる演出を加えます。たとえば背景色が真っ白から黒へ、スッとフェードするようなイメージで、とても見やすく快適になります。

2. prefers-reduced-motionとは？動きに弱い人への配慮

prefers-reduced-motion は、利用者の環境設定で「動きを減らす」を選択している場合に反応するCSS機能です。オペレーティングシステムの設定に連動しており、アニメーションや動きが苦手なユーザーにとって大切なアクセシビリティ機能です。

この設定がオンの場合、Webサイト側もアニメーションを抑え、動きを少なくしてあげるべきだとされています。 Bootstrapでのダーク／ライト切替でも、この配慮を取り入れることでより多くの利用者に優しいWebデザインになります。

3. ダーク／ライト切り替えを滑らかにするCSS（prefers-reduced-motion対応）

以下のコードでは、ライトテーマとダークテーマの色変化をCSS変数で管理し、さらにアニメーションを追加することでなめらかな切り替えを実現しています。また、prefers-reduced-motion に対応し、動きを減らしたいユーザーにはアニメーションを無効化するようにしています。


<style>
/* ライトテーマ */
.theme-root {
    --site-bg: #ffffff;
    --site-text: #222222;
    --site-accent: #005eff;
}

/* ダークテーマ */
.theme-root[data-bs-theme="dark"] {
    --site-bg: #000000;
    --site-text: #ffffff;
    --site-accent: #4bc3ff;
}

/* アニメーション */
.theme-root, 
.theme-root p, 
.theme-root h1, 
.theme-root h2, 
.theme-root a {
    transition:
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .theme-root,
    .theme-root p,
    .theme-root h1,
    .theme-root h2,
    .theme-root a {
        transition: none;
    }
}

/* 色適用 */
.theme-root {
    background-color: var(--site-bg);
    color: var(--site-text);
}

.theme-root a {
    color: var(--site-accent);
}
</style>

<!-- div をテーマルートとして扱う -->
<div class="theme-root p-4" data-bs-theme="dark">
    <h2>アニメーション付きテーマ切替の例</h2>
    <p>背景や文字の色がゆっくりと変わり、視覚的に優しいテーマ切替ができます。</p>
    <a href="#">リンクカラーもテーマに合わせて変わります</a>
</div>

ブラウザ表示