OSがダークモードかを判定して見栄えを変更する 👀

CSS

メディアクエリを使ってスタイルを当てることができます。

ソースコード

body {
  color: #2e3440;
  background: #d8dee9;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #d8dee9;
    background: #22262a;
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: #2e3440;
    background: #d8dee9;
  }
}

JavaScript

メディアクエリでスタイルを当てるのであれば、MediaQueryListを使って、メディアクエリが切り替わった際のコールバックイベントで、結果的にモードが切り替わった際にイベントを発火させることができます。

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

isDark.addEventListener('change', (evt) => {
  if (evt.matches) {
    // ダークモードの処理
    console.log('dark mode!');
  } else {
    // ダークモードじゃない時の処理
    console.log('not dark mode!');
  }
});