feat: match the theme color of status bar in light/dark mode #1340

Closed
opened 2025-11-11 14:43:18 -06:00 by GiteaMirror · 3 comments
Owner

Originally created by @coxde on GitHub (Jun 21, 2024).

Is your feature request related to a problem? Please describe.
Now the PWA theme_color is hard-coded to #343541 (according to my search), which makes the status bar doesn't looks like a native app in light mode.

1

Describe the solution you'd like
I'm not sure but there should be a method to match the color.

Describe alternatives you've considered
N/A

Additional context
See also:
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://github.com/elk-zone/elk/issues/941
https://github.com/cheeaun/phanpy/issues/231

Originally created by @coxde on GitHub (Jun 21, 2024). **Is your feature request related to a problem? Please describe.** Now the PWA `theme_color` is hard-coded to `#343541` (according to my [search](https://github.com/open-webui/open-webui/blob/9e4dd4b86f77653b59dc1fa97fe3f72e8252b359/backend/main.py#L1505C25-L1505C32)), which makes the status bar doesn't looks like a native app in light mode. ![1](https://github.com/open-webui/open-webui/assets/63153334/f3c99c35-d330-4c5f-991c-530afbf629cd) **Describe the solution you'd like** I'm not sure but there should be a method to match the color. **Describe alternatives you've considered** N/A **Additional context** See also: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://github.com/elk-zone/elk/issues/941 https://github.com/cheeaun/phanpy/issues/231
Author
Owner

@tjbck commented on GitHub (Jun 21, 2024):

Just pushed a commit to dev, let me know if that did anything for you!

@tjbck commented on GitHub (Jun 21, 2024): Just pushed a commit to dev, let me know if that did anything for you!
Author
Owner

@coxde commented on GitHub (Jun 21, 2024):

Thanks for your quick response! Now it can change color based on light/dark mode.

One nitpick is that the white/black color and the status bar don't exactly match the white/black of the app theme, it would be better if they could match!

@coxde commented on GitHub (Jun 21, 2024): Thanks for your quick response! Now it can change color based on light/dark mode. One nitpick is that the white/black color and the status bar don't exactly match the white/black of the app theme, it would be better if they could match!
Author
Owner

@tjbck commented on GitHub (Jun 22, 2024):

The updated implementation delegates setting the colour to the device, further improvement won't be possible unless we overhaul the manifest.json code entirely. Thanks for the feedback!

@tjbck commented on GitHub (Jun 22, 2024): The updated implementation delegates setting the colour to the device, further improvement won't be possible unless we overhaul the manifest.json code entirely. Thanks for the feedback!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#1340