Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(web): add dark mode theme-color meta tag for PWA status bar - #6320

Open
ocfox wants to merge 1 commit into
usememos:mainfrom
ocfox:pwa-dark-fix
Open

fix(web): add dark mode theme-color meta tag for PWA status bar#6320
ocfox wants to merge 1 commit into
usememos:mainfrom
ocfox:pwa-dark-fix

Conversation

@ocfox

@ocfox ocfox commented Sep 13, 2026

Copy link
Copy Markdown

Fixes #6319

When Memos is installed as a PWA on Android, the system status bar remained white even when dark mode was enabled. Changes adds declarative theme-color meta tags with prefers-color-scheme media queries so that the Android status bar adapts to dark mode.

@ocfox
ocfox requested a review from a team as a code owner September 13, 2026 15:54
@coderabbitai

coderabbitai Bot commented Sep 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: d8e9d82f-0b40-4267-ae56-b2144fa7d560

📥 Commits

Reviewing files that changed from the base of the PR and between 2e33e7a and 72467f5.

📒 Files selected for processing (3)
  • web/index.html
  • web/src/utils/theme.ts
  • web/tests/theme.test.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The HTML document now declares light and dark theme-color meta tags. updateThemeColorMeta updates both tags based on the selected theme. The "system" preference restores separate light and dark defaults, while explicit themes set both tags to the resolved color. New Vitest coverage verifies explicit dark themes and switching back to "system".

Suggested reviewers: boojack

Priority: ➖ Normal

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 72467

The change provides adaptive light and dark status-bar colors without an established material runtime or deployment risk.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the web fix that adds a dark-mode theme-color meta tag for the PWA status bar.
Description check ✅ Passed The description accurately explains the dark-mode status bar issue and the addition of media-query-based theme-color meta tags.
Linked Issues check ✅ Passed Issue #6319 requires the Android PWA/WebAPK status bar to adapt to dark mode. web/index.html now defines light and dark theme-color meta tags with prefers-color-scheme media queries. loadTheme…
Out of Scope Changes check ✅ Passed The changes are limited to status-bar theme-color metadata, theme update logic, and automated tests for that behavior. These changes directly support issue #6319.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…

Warning

Some tools did not complete. Review the errors below.

🔧 Biome (2.5.10)
web/src/utils/theme.ts

Biome could not lint this file: nested root configuration. Check the repository's Biome configuration and plugins.

web/tests/theme.test.ts

Biome could not lint this file: nested root configuration. Check the repository's Biome configuration and plugins.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Status bar remains white in dark mode when installed as PWA on Android

1 participant

@ocfox