最近便利な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-
![prefers-color-schemeでOS設定のダークモードが便利(最近便利なCSSおれおれAdvent Calendar 2023 – 10日目) | Ginpen.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/de4af7f62b39439905833504e59ba1e153be6d8b/height=288;version=1;width=512/https%3A%2F%2Fginpen.com%2Fwp-content%2Fthemes%2Fginpen-theme%2Fimg%2Ficon-512.png)