[CSS] ダークモードの実装方法 - システム設定ベースとユーザー選択ベースのモード変更

現代、数多くのウェブサイトやアプリケーションでは、ダークモードとライトモードの切り替え機能がほぼ必須とされています。この機能はユーザーの視覚を保護し、エネルギーの節約効果と個別のユーザープリファレンスを反映し、全体的なユーザーエクスペリエンスを向上させます。本稿では、ウェブページでCSSを使用してこのテーマ切り替え機能をどのように実装するか、初心者でも追いやすく詳細に説明します。

システム設定に基づく初期モード設定

ウェブページを訪れた際の最初の表示は、主にそのユーザーのシステム設定に基づいています。もしユーザーのオペレーティングシステムやブラウザ設定がダークモードに設定されている場合、そのウェブページもダークモードで表示されるでしょう。これは、ユーザーの好みに合わせてウェブページのスタイルを初期設定するものです。これにより、ユーザーの視疲労を軽減し、より快適なウェブブラウジングの経験を提供できます。この機能を実装するためには、CSSの特別なメディアクエリであるprefers-color-schemeを使用します。

prefers-color-schemeとは？

prefers-color-schemeは、ユーザーのシステム設定で好まれる色のテーマ（例：ダークモードまたはライトモード）を検出するためのCSSメディアクエリの特性です。

利用可能な値：

  • no-preference: ユーザーのシステムに特定のテーマの好みがない場合。
  • light: ライトモードを好む際に適用。
  • dark: ダークモードを好む際に適用。

適用方法

1. デフォルトでライトモードスタイルを適用

css
:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}
  • :rootはCSSで文書の最上位要素を指します。これは通常、全体のウェブページに対するデフォルトの値を設定する際に使用されます。
  • 上記のコードは、ウェブページのデフォルトモードをライトモードに設定しています。したがって、主要なフォント色、セカンダリフォント色、そして背景色に関する値が指定されています。
  • --primary-font-color, --secondary-font-color, --bg-colorはCSS変数として、ウェブページ全体で使用される色の値を保持しています。

2. ダークモードを好む場合のスタイル適用

css
@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}
  • @media (prefers-color-scheme: dark)は、ユーザーのオペレーティングシステムまたはブラウザ設定でダークモードを好む場合にのみ適用されるスタイルを定義するメディアクエリです。
  • このセクションのコードは、ユーザーのシステム設定がダークモードの場合、ウェブページのスタイルをダークモードに切り替える設定を含んでいます。
  • ここでも、CSS変数を利用して、主要なフォント色、セカンダリフォント色、および背景色に関する値を変更し、ダークモードに適したスタイルを適用しています。

このCSSコードは、ユーザーのシステム設定に応じてライトモードとダークモードのスタイル切り替えを自動的に行うためのものです。ユーザーがダークモードを好む設定を選択した場合、ダークモードのスタイルが適用され、そうでない場合はデフォルトでライトモードのスタイルが適用されます。

注意点

  • すべてのブラウザがprefers-color-schemeをサポートしているわけではないので、互換性を考慮して実装する必要があります。
  • ユーザーのシステム設定に依存するだけでは十分ではない場合もあります。サイト内でユーザーが直接テーマを変更できるオプションを提供することが推奨されます。詳細は以下で続けて説明します。

ユーザー選択に基づくモードの切替

ウェブページは、初期モードをユーザーのシステム設定に基づいて設定した後、ユーザーは自分の好みに合わせてモードを変更したい場合があります。例えば、周囲の環境や特定のタスクに応じてダークモードとライトモードの間で切り替えたいユーザーのニーズを満たすことが重要です。このようなユーザー選択に基づくテーマ切替機能は、ウェブページの柔軟性を高め、ユーザーによりカスタマイズされた体験を提供します。これを実現するためには、HTML、CSS、およびJavaScriptを組み合わせて実装することができます。

実装方法

1. HTML: モード切替ボタンの追加 ダークモードとライトモードを切り替えるボタンやトグルスイッチをウェブページに追加します。

html
<button id="themeToggle">Dark Mode</button>

2. デフォルトおよびライトモードのスタイル

css
:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}
  • :rootはCSSの最上位要素を意味し、ここで変数を定義することで、全ページのデフォルトスタイルを設定できます。
  • [data-theme='light']は、data-theme属性の値が'light'である要素に適用されるスタイルを指します。
  • このセクションでは、デフォルトでウェブページに適用されるライトモードのスタイルを定義しています。

3. ダークモードのスタイル

css
[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}
  • [data-theme='dark']は、data-theme属性の値が'dark'である要素に適用されるスタイルを指します。
  • このセクションでは、ダークモードを選択した際にウェブページに適用されるスタイルを定義しています。

4. JavaScript: モード切替のロジック実装

ボタンがクリックされたときにウェブページのテーマが切り替わるように、JavaScriptでロジックを実装します。

javascript
const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

この設定により、ユーザーが'Dark Mode'ボタンをクリックすると、ウェブページのテーマがダークモードに変わります。逆に、ダークモードで'Light Mode'ボタンをクリックすると、ライトモードに切り替わります。

ウェブページでのダークモードとライトモードの切替は、ユーザーエクスペリエンスを向上させる重要な機能の一つです。この記事を通じて、その機能の実装方法についての基本的な理解を得ることができたことを願っています。ウェブ開発初心者であっても、このガイドラインに従って段階的に進めば、ウェブページに効果的なテーマ切替機能を追加することができます。

© Copyright 2023 CLONE CODING