JavaScriptでダークモードを検出する方法

メディアクエリを使用する方法: メディアクエリを使用すると、CSSのメディアフィーチャーを利用して、ダークモードが有効かどうかを検出できます。以下はサンプルコードです。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // ダークモードが有効です
  console.log('ダークモードが有効です');
} else {
  // ダークモードが無効です
  console.log('ダークモードが無効です');
}

CSS変数を使用する方法: CSS変数を使用すると、ダークモードが有効な場合に異なるスタイルを適用することができます。以下はサンプルコードです。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
  document.documentElement.setAttribute('data-theme', 'dark');
} else {
  document.documentElement.setAttribute('data-theme', 'light');
}

localStorageを使用する方法: localStorageを使用して、ユーザーの選択に基づいてダークモードの状態を保存することもできます。以下はサンプルコードです。

const isDarkMode = localStorage.getItem('darkMode');
if (isDarkMode === 'true') {
  // ダークモードが有効です
} else {
  // ダークモードが無効です
}

これらの方法を組み合わせて使用することで、ユーザーがダークモードを使用しているかどうかを検出し、それに応じて適切なスタイルを適用することができます。ウェブ開発において、ユーザーの環境に合わせたパーソナライズされた体験を提供するために、ダークモードの検出は重要な機能です。