prefers-color-schemeでOS設定のダークモードが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 10日目） | Ginpen.com最近便利なCSSおれおれAdvent Calendar 2023 – 10 日目 ダークモード対応って近年人気じゃないですか。自分はまああんまり興味ないんですが、なんか好きですよねみんな。 prefers-color-scheme を使うとその端末全体の設定を判定できるので、ダークモード、ライトモードの選択肢に「端末の設定に合わせる」を追加することもできます。 例 デモ：https://codepen.io/ginpei/pen/vYbPQBP :root { /* デフォルトでライトモード（あるいはフォールバック） */ --theme--background-color: #f0f0f0; --theme--color: #333; /* 端末がダークモードのとき */ @media (prefers-color-scheme: dark) { --theme--background-
