M

MLOG

日本語

CSSメディアクエリとカスタムプロパティでユーザー設定に自動適応するライト＆ダークテーマを作成。グローバルなユーザーのアクセシビリティと視覚的魅力を向上させます。

CSS light-dark()関数：グローバルなウェブに対応する自動テーマ適応

今日のグローバルに接続された世界では、ウェブサイトは多様な背景や好みを持つユーザーにとってアクセシブルで視覚的に魅力的である必要があります。これを達成する最も効果的な方法の一つは、自動テーマ適応、具体的にはユーザーのシステム設定に基づいて調整されるライトテーマとダークテーマの両方を提供することです。このブログ記事では、CSSメディアクエリとカスタムプロパティを使用してこの機能を実装する方法を案内し、国際的なオーディエンスにシームレスで快適なブラウジング体験を保証します。

なぜ自動ライト＆ダークテーマを実装するのか？

ウェブプロジェクトに自動テーマ適応を組み込むべき説得力のある理由はいくつかあります：

CSSで自動テーマ適応を実装する方法

自動テーマ適応の中核は、prefers-color-scheme メディアクエリにあります。このCSSメディアクエリを使用すると、ユーザーの優先カラースキーム（ライトまたはダーク）を検出し、対応するスタイルを適用できます。

ステップ1：カスタムプロパティ（CSS変数）を定義する

まず、ライトテーマとダークテーマの色の値を格納するためのカスタムプロパティ（CSS変数）を定義します。これにより、変数の値を更新するだけで簡単にテーマを切り替えることができます。


:root {
  --background-color: #ffffff; /* ライトテーマの背景 */
  --text-color: #000000; /* ライトテーマのテキスト */
  --link-color: #007bff; /* ライトテーマのリンク */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* ダークテーマの背景 */
    --text-color: #ffffff; /* ダークテーマのテキスト */
    --link-color: #66b3ff; /* ダークテーマのリンク */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

この例では、背景色、テキスト色、リンク色、ボタンの色の変数を定義しています。:root セレクタはこれらの変数をドキュメント全体に適用します。そして @media (prefers-color-scheme: dark) メディアクエリは、ユーザーがシステムをダークモードに設定したときに、これらの変数をダークテーマの値で上書きします。

ステップ2：カスタムプロパティをスタイルに適用する

次に、これらのカスタムプロパティをCSSスタイルに適用して、ウェブサイト要素の外観を制御します。


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* スムーズなトランジション */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

ここでは、var() 関数を使用してカスタムプロパティの値にアクセスしています。また、テーマ間のスムーズな移行を作成するために、body 要素に transition プロパティを追加しました。

ステップ3：テストと調整

さまざまなブラウザやオペレーティングシステムで実装を徹底的にテストしてください。Chrome、Firefox、Safari、Edgeなどのモダンブラウザは、prefers-color-scheme メディアクエリを完全にサポートしています。オペレーティングシステムの設定でライトモードとダークモードを切り替えて、ウェブサイトに反映される変更を確認できます。

高度なテクニックと考慮事項

手動のテーマスイッチを提供する

自動テーマ適応は素晴らしい出発点ですが、一部のユーザーはシステム設定を手動で上書きしたい場合があります。JavaScriptとローカルストレージを使用して、手動のテーマスイッチを提供できます。

HTML:

JavaScript:


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

let currentTheme = localStorage.getItem('theme') || 'auto'; // デフォルトはauto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// ページ読み込み時に初期テーマを適用
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // autoに設定されている場合、prefers-color-schemeに決定を任せる
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: 以前のCSSに加えて、以下のCSSを追加します。手動による上書きに注目してください：


body.light-theme {
  --background-color: #ffffff; /* ライトテーマの背景 */
  --text-color: #000000; /* ライトテーマのテキスト */
  --link-color: #007bff; /* ライトテーマのリンク */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* ダークテーマの背景 */
  --text-color: #ffffff; /* ダークテーマのテキスト */
  --link-color: #66b3ff; /* ダークテーマのリンク */
  --button-background-color: #333;
  --button-text-color: #fff;
}

このコードスニペットは、ユーザーがライト、ダーク、自動テーマを切り替えることができるボタンを追加します。選択されたテーマはローカルストレージに保存されるため、ページを再読み込みしても維持されます。

画像とSVGの取り扱い

一部の画像やSVGは、ライトテーマとダークテーマの両方で見栄えが良くない場合があります。CSSメディアクエリを使用して、これらのアセットの異なるバージョンを条件付きで表示できます。


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

このコードスニペットは、ライトモードでは1つの画像（クラスlight-mode）を表示し、ダークモードでは別の画像（クラスdark-mode）を表示します。

国際的なオーディエンスのためのカラーパレットの考慮事項

ライトテーマとダークテーマのカラーパレットを選択する際は、文化的な連想やアクセシビリティの考慮事項に注意してください。以下にいくつかの一般的なガイドラインを示します：

パフォーマンスに関する考慮事項

自動テーマ適応の実装は比較的簡単ですが、パフォーマンスへの潜在的な影響を考慮することが重要です。レンダリングを遅くする可能性のある過度に複雑なCSSセレクタやアニメーションの使用は避けてください。また、変数のルックアップのオーバーヘッドを最小限に抑えるために、カスタムプロパティが効率的に定義されていることを確認してください。

パフォーマンスを最適化するためのベストプラクティスをいくつか紹介します：

アクセシビリティのベストプラクティス

ライトテーマとダークテーマが、WCAG（ウェブコンテンツアクセシビリティガイドライン）などのアクセシビリティガイドラインを満たしていることを確認してください。これには、十分なカラーコントラストの提供、セマンティックHTMLの使用、すべてのインタラクティブ要素がキーボードでアクセス可能であることの保証が含まれます。

従うべき具体的なアクセシビリティのベストプラクティスをいくつか紹介します：

さまざまな地域での例

多様なグローバルオーディエンスに合わせてライトテーマとダークテーマを調整する方法の例を考えてみましょう：

まとめ

自動ライト＆ダークテーマの実装は、グローバルなオーディエンスにとってよりアクセシブルでユーザーフレンドリーなウェブ体験を創造するための重要なステップです。CSSメディアクエリとカスタムプロパティを活用することで、ウェブサイトの外観をユーザーの好みに合わせて簡単に適応させ、目の疲れを軽減し、視覚障害を持つユーザーのアクセシビリティを向上させることができます。文化的な連想、アクセシビリティガイドライン、パフォーマンスに関する考慮事項を忘れずに考慮し、すべての人にとってシームレスで包括的なブラウジング体験を保証してください。

これらのテクニックを採用することで、モダンなウェブデザインの原則へのコミットメントを示し、国際的なオーディエンスの多様なニーズに応え、あなたのウェブサイトをすべての人にとって歓迎される快適な空間にすることができます。