fix: sync PWA status bar theme-color with app color scheme#28006
Open
heimoshuiyu wants to merge 1 commit into
Open
fix: sync PWA status bar theme-color with app color scheme#28006heimoshuiyu wants to merge 1 commit into
heimoshuiyu wants to merge 1 commit into
Conversation
609bae0 to
c73df21
Compare
5bd6e3e to
609bae0
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue for this PR
Closes #17663
Type of change
What does this PR do?
When the app is installed as a PWA on mobile Chrome, the top status bar color doesn't match the app's actual theme — it stays
#F8F7F7(light) regardless of whether the user has selected light or dark mode.The HTML had two
<meta name="theme-color">tags — the second one withmedia="(prefers-color-scheme: dark)"was supposed to kick in when the system is in dark mode, but it never actually worked. According to the WHATWG HTML Living Standard algorithm for obtaining a page's theme color (https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color), browsers walk meta tags in tree order and return the first one whosemediamatches. Our first tag has nomediaattribute at all, which means it unconditionally matches — the second tag is never even checked.The fix removes the dead second tag and instead dynamically updates the single remaining meta tag's
contentinoc-theme-preload.js(runs synchronously before paint) and the theme context (handles runtime changes).How did you verify your code works?
Confirmed on a mobile Chrome PWA install: before the fix the status bar was always light, after the fix it correctly follows the app's light/dark theme setting.
Screenshots / recordings
before
after
Checklist