2025/01/03 (更新日: 2025/01/04)

Webサイトをダークモードに対応させる方法 | システム設定連動から切り替えボタンまで

はじめに

近年、多くのWebサイトやアプリケーションでダークモードが採用されています。
ダークモードは、背景色を暗く、文字色を明るくすることで、目の負担を軽減したり、デバイスのバッテリー消費を抑えたりする効果が期待できます。
本記事では、Webサイトにダークモードを実装する具体的な方法について解説します。

ダークモード実装のメリット

ダークモードを実装することで、以下のような利点があります。

目の負担軽減: 周囲が暗い環境下での視認性が向上し、目の疲れを軽減できます。
バッテリー消費の抑制: 特に有機ELディスプレイを搭載したデバイスでは、消費電力を抑える効果が期待できます。
デザインの多様性: ユーザーに異なる視覚体験を提供し、サイトの魅力を高めることができます。
アクセシビリティの向上: 特定のユーザーにとって、コントラスト比の調整が容易になる場合があります。

ダークモードの実装方法

ダークモードを実装する方法は主に2つあります。

ユーザーのシステム設定（OSの設定）に従って自動的に切り替える方法
Webサイト内に手動で切り替えるボタンを設置する方法

これらの方法を組み合わせて提供することで、より多くのユーザーに快適な閲覧環境を提供できます。

システムの設定に従う方法

この方法は、ユーザーがOSで設定しているテーマ（ライトモードまたはダークモード）に合わせて、Webサイトの表示を自動的に切り替えるものです。CSSのMedia Queriesを使用します。

CSSでの実装

CSSの記述例を紹介します。

CSS
/* ライトモードのスタイル（デフォルト） */
body {
    background-color: #fff;
    color: #000;
}

/* ダークモードのスタイル */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #eee;
    }
    /* 必要に応じて他の要素のスタイルも記述 */
    a {
        color: #add8e6; /* 例：ダークモード時のリンク色 */
    }
}

prefers-color-scheme: dark は、ユーザーがダークモードを希望している場合に適用されるMedia Featureです。この中にダークモード用のスタイルを記述します。

注意点: ブラウザの対応状況を確認してください。主要なブラウザの最新バージョンは対応していますが、古いバージョンでは対応していない場合があります。

手動で切り替える方法

この方法は、Webサイト内にダークモードとライトモードを切り替えるためのボタンを設置し、ユーザーが任意に表示を切り替えることができるようにするものです。JavaScriptとCSSを組み合わせて実装します。

HTMLでの実装例

HTMLでの記述例を紹介します。

HTML
<button id="theme-toggle">ダークモードに切り替える</button>

CSSでの実装例

CSSでの記述例を紹介します。

CSS
/* ライトモードのスタイル（デフォルト） */
body {
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s, color 0.3s; /* アニメーション効果 */
}

body.dark-mode {
    background-color: #333;
    color: #eee;
}

/* ダークモード時のリンク色 */
body.dark-mode a {
    color: #add8e6;
}

JavaScriptでの実装例

JavaScriptでの記述例を紹介します。

JavaScript
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    if (body.classList.contains('dark-mode')) {
        themeToggle.textContent = 'ライトモードに切り替える';
        localStorage.setItem('theme', 'dark'); // ローカルストレージに保存
    } else {
        themeToggle.textContent = 'ダークモードに切り替える';
        localStorage.setItem('theme', 'light'); // ローカルストレージに保存
    }
});

// ページ読み込み時にテーマを復元
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
        themeToggle.textContent = 'ライトモードに切り替える';
    }
});

上記のJavaScriptコードでは、ボタンがクリックされるとbody要素にdark-modeクラスを付与または削除し、ボタンの表示テキストを切り替えます。また、localStorageを使用して、ユーザーの設定を保存し、次回アクセス時にも同じテーマが適用されるようにしています。

JSライブラリ「darkmode.js」を使ってモードの切り替えボタンを実装する方法

ダークモードとライトモードとの切り替えは、ユーザーの利用環境に応じて自動で切り替わるようにする他に切り替えボタンを設置してユーザーの好みなどに応じて切り替えられるようにすることもできます。
このモードの切り替えは上記のようにJavaScriptを使って実装しても良いのですが、便利なライブラリがありますので今回はこちらのライブラリの使い方も紹介したいと思います。

darkmode.jsを利用すると簡単にWebページをダークモードに対応させることができます。
CSSのmix-blend-modeを利用して色の切り替えを行うので、細かな配色の設定などには向いていないと思いますが手軽にダークモードに対応させることができます。

・Can I useによるmix-blend-modeのブラウザ対応状況

Can I useによるmix-blend-modeのブラウザ対応状況
https://caniuse.com/mdn-css_properties_mix-blend-mode

darkmode.jsの使い方については下記のページで紹介していますので、よかったらよかったら見てみて下さい。

実装上の注意点

コントラスト比の確保: ダークモードとライトモードの両方で、テキストと背景色のコントラスト比が十分になるように調整してください。WCAG（Web Content Accessibility Guidelines）の基準を満たすことが望ましいです。
画像やアイコンの調整: 背景色が暗くなることで視認性が下がる画像やアイコンは、色を調整したり、ダークモード専用のバージョンを用意したりする必要があります。
色の統一感: ダークモードとライトモードで、サイト全体の色の統一感が損なわれないように注意してください。
ユーザーテスト: 実際にユーザーにテストしてもらい、フィードバックを得ることが重要です。
パフォーマンス: 大量のスタイル変更はパフォーマンスに影響を与える可能性があります。効率的なCSS設計を心がけましょう。

まとめ

Webサイトにダークモードを実装することで、ユーザーエクスペリエンスを向上させ、より多くのユーザーに快適な閲覧環境を提供できます。システム設定に連動させる方法と、手動で切り替える方法を組み合わせることで、より柔軟な対応が可能になります。ぜひ、あなたのWebサイトにもダークモードの実装を検討してみてください。