prefers-color-scheme によるライト・ダークモードの制御

media queryでシステムがダークモードかライトモードかを判定するのに使う
関連するメディア特性としては以下がある

• prefers-contrast : システムがコントラスト制御の設定をしているか
• prefers-reduced-motion : システムがモーション制御の設定をしているか
• prefers-reduced-transparency : システムが透明度の設定をしている

MDN Web Docs

• https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme
• https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-contrast
• https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency

Example

web.devの関連記事
https://web.dev/prefers-color-scheme/

Make design token using @property.