ユーザーのカラーテーマの設定によりスタイルを変更するためには、prefers-color-scheme メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、prefers-color-scheme メディアクエリを使用せずに、class 属性を使ったスタイルの切り替えが行われます。

より prefers-color-scheme を使いやすくするために、navigator.preference.colorScheme という API が提案されています。この API はユーザーが設定したカラースキーマを取得したり、設定を上書きすることが可能です。

この API により、クラス名を指定したスタイルの切り替えや、localStorage へのテーマの保存が不要になることが期待されます。

const toggleTheme = async () => {
  const colorScheme = navigator.preference.colorScheme.value;
  if (colorScheme === "dark") {
    await navigator.preference.colorScheme.requestOverride("light");
  } else {
    await navigator.preference.colorScheme.requestOverride("dark");
  }
};