ダークモード対応サイトはメディアクエリ(prefers-color-scheme)で

See the Pen prefers-color-scheme by Shuhei Koide (@shkd) on CodePen.0

iOS13にもダークモードが搭載されることが明らかになりましたし、Chromeもv76以降で対応されることが分かっています。

https://caniuse.com/#search=prefers-color-scheme

これで、PWAでもメディアクエリでモード切替ができるようになります。CSS変数をつかって、各モードのカラースキームを定義して、CSS変数部分メディアクエリで括るのがベストプラクティスでしょうか。

:root {
 --color:#222;
 --bgcolor:#fff;
}
@media (prefers-color-scheme: dark) {
 :root {
  --color:#eee;
  --bgcolor:#222;
 }
}
body{
 color: var(--color);
 background-color: var(--bgcolor);
}
カテゴリー: Code

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る