prefers-color-schemeでダークモードを検出

prefers-color-scheme

prefers-color-schemeメディア機能は、ユーザーがOS設定でダークまたはライトのカラーテーマを要求しているかを検出します。

CSSの使用

body {
  background: #ffffff;
  color: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #0a0a0b;
    color: #fafafa;
  }
}

JavaScript検出

const isDarkMode = window.matchMedia(
  '(prefers-color-scheme: dark)'
).matches;

変更の監視

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    document.body.classList.add('dark');
  } else {
    document.body.classList.remove('dark');
  }
});

ユーザーオーバーライドパターン

function getTheme() {
  const stored = localStorage.getItem('theme');
  if (stored) return stored;
  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark' : 'light';
}

ブラウザサポート

2019年以降のすべてのモダンブラウザでサポート（Chrome 76、Firefox 67、Safari 12.1、Edge 79）。