Prefers-color-scheme not working?

Since the release of macOS Mojave we redesigned all our websites etc to support the dark theme. This is a system set setting available in most OS/browser combinations. On iOS in safari it works perfectly but not in my ionic app.

I have the following CSS to make the difference obvious.

@media (prefers-color-scheme: dark) {
.content-md,
.content-ios {
background-color: green !important;
}
}

@media (prefers-color-scheme: light) {
.content-md,
.content-ios {
background-color: yellow !important;
}
}

source https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

No matter what I do the content is always yellow, if I open it in the browser on my ios device it works perfectly.

Any solution on this? I am also seeing same issue.

Found that in Simulator iOS13 it works but on real device it is failing to work.

I’m thinking maybe this is a Capacitor issue since it’s working in Safari but not in the Capacitor app.

Got it working. Make sure your app is built using latest xCode 11 build tools.

And refer to this doc

1 Like

default build version is xcode 10 in ionic package build tools. so I changed to xcode11 and it worked! thank you!