iOS13にもダークモードが搭載されることが明らかになりました。Chromeもv76以降で対応されることが分かっています。
これで、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);
}アップデート（2021/6/5）
本サイトでも上記内容を実装してみました。
さらに、iOSでの文字サイズ変更などにも以下コードで対応済みです。
:root {
@supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
font: -apple-system-body;
}
}