CSS based dark mode / light mode changes are not being applied to websites installed to homescreen as PWA (Webapp).
Changing dark/light mode does not immediately change the displayed PWA style. A restart of the webapplication is required for the css to take effect.
While in the browser the css is being applied immediately as expected.
This bit only occurs on iOS 17. iPadOS and OSX work as expected.
Example: https://whatpwacando.today
Hi,
I'm experiencing the same issue. Within iOS Safari (itself) it works as expected, but after installing/adding to homescreen it does not switch light/dark mode automatically (as mentioned you need to close/open the web-app for updated styling). I can confirm it does work on macOS (after installing the web-app to the Dock and in Safari itself).
Snippet from my css:
:root {
color-scheme: light dark;
--theme-background-color: rgb(225, 225, 225);
}
@media (prefers-color-scheme: dark) {
:root {
--theme-background-color: rgb(56, 55, 54);
}
}
Kind regards,
Rob
Same here - have also tried this:
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
handleLightsOff();
} else {
handleLightsOn();
}
});
Same problem - PWA needs to be closed and re-opened.
I even tried to listen to foreground/background changes and force reset the theme. However it seems that the value of prefers-color-scheme never changes from the one that the PWA was launched with. The only way to change it is to kill the app and start again.
I am also having this issue. May be there is a way to open the bug report?
has anyone found a workaround yet?
-
—
maxischl
Add a CommentAlso reported this via iOS Feedback Assistent, incident ID is FB12858610 (Manual change dark/light mode not working for PWA installed to homescreen).