PWA in Android Firefox app shows white status bar even in dark mode

michaelborn commented 2 months ago

Describe the bug

There's a pretty jarring usage of #ffffff as the theme color in the memos PWA, and while Chrome seems to ignore this, Firefox does not. I'll attach a screenshot... basically, both the status bar and home/back button bar are white, while Memos is in dark mode and I even have a night mode extension installed to darken the screen.

Steps to reproduce

Grab your android phone
Install the Firefox browser extension (this issue does not occur in Chrome.)
Open Firefox
Browse to Memos, log in, set theme to dark
Install to home screen
open the memos app and review the status bar and home bar

The version of Memos you're using.

v0.22.2

Screenshots or additional context

See the theme_color definition in the manifest: https://github.com/usememos/memos/blob/main/web/public/site.webmanifest#L8

Possible fixes:

I initially thought using two different manifests for light mode and dark mode, but now that I think about it this would lock in the theme color for the installed PWA, while the user still has the ability to change the memos theme from light to dark in their profile/settings.
Use <meta name="theme-color" content="#000000" /> to set the site theme color at the page/request level: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

michaelborn commented 2 months ago

Here are the promised screenshots comparing the chrome and Firefox pwa renderings:

Screenshot of Timeline page from Chrome PWA Screenshot of Tumeline oage from Firefox PWA

boojack commented 2 months ago

Might be fixed with https://github.com/usememos/memos/commit/ea70dd85bf4c4fdd08f215032828ea89905c3271

usememos / memos