[PR #8181] [MERGED] [AI] Fix desktop PWA title bar theme color #122392

New Issue

2026-06-11T21:14:30-05:00

GiteaMirror commented

2026-06-11 21:14:30 -05:00

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/8181
Author: @PaolinPaperin
Created: 6/10/2026
Status: ✅ Merged
Merged: 6/10/2026
Merged by: @MikesGlitch

Base: master ← Head: codex/fix-desktop-pwa-titlebar-color

📝 Commits (2)

b205518 [AI] Fix desktop PWA title bar theme color
25498c0 [AI] Re-trigger CI after transient VRT runner image-pull failure

📊 Changes

5 files changed (+96 additions, -10 deletions)

View changed files

📝 packages/desktop-client/src/components/FinancesApp.tsx (+1 -1)
📝 packages/desktop-client/src/components/manager/ManagementApp.tsx (+1 -5)
📝 packages/desktop-client/src/hooks/useMetaThemeColor.test.ts (+48 -1)
📝 packages/desktop-client/src/hooks/useMetaThemeColor.ts (+40 -3)
➕ upcoming-release-notes/fix-pwa-titlebar-theme-color.md (+6 -0)

📄 Description

Description

Fixes the browser/PWA title-bar (theme) color on macOS desktop.

Previously only narrow/mobile layouts updated <meta name="theme-color">; on wide
desktop layouts both FinancesApp and ManagementApp passed undefined to
useMetaThemeColor, so the chrome kept the static #5c3dbb fallback from
index.html. In an installed Safari PWA that left the macOS title bar stuck on
purple instead of following the app.

This uses the app's mobile header color for the desktop title bar too —
theme.mobileViewTheme for the budget app and theme.mobileConfigServerViewTheme
for the file-manager/config screens — so the installed PWA and Safari's desktop
chrome match the mobile header consistently and stay theme-aware (the value
differs per theme). Thanks to @Juulz for suggesting the mobile header color over
the page/sidebar background.

It also updates useMetaThemeColor to listen for prefers-color-scheme changes,
so switching macOS appearance between light and dark updates the title bar without
a manual refresh.

Screenshots

Before

Standard Light Theme - Before (Safari)

Standard Light Theme - Before (PWA)

Custom Theme - Before (PWA)

After

Standard Light Theme - After (Safari)

Custom Theme - After (Safari)

Custom Themes - After (PWA)

Related issue(s)

Testing

Verified with:

corepack yarn workspace @actual-app/web run test useMetaThemeColor.test.ts
corepack yarn typecheck
corepack yarn lint:fix
corepack yarn test

Manual testing:

Installed Actual as a Safari PWA on macOS.
Confirmed the PWA title bar follows the active app theme instead of staying purple.
Confirmed normal Safari's toolbar now follows the active app theme instead of staying visually separate from the page.
Confirmed switching macOS system appearance between light and dark updates the title/browser chrome without requiring a refresh.

Checklist

Release notes added (see link above)
No obvious regressions in affected areas
Self-review has been performed - I have read every line of this diff and can explain what each change does and why it is needed

Bundle Stats

Bundle	Files count	Total bundle size	% Changed
desktop-client	37	14.14 MB → 14.14 MB (+739 B)	+0.00%
loot-core	1	5.28 MB	0%
api	2	3.87 MB	0%
cli	1	7.97 MB	0%
crdt	1	11.12 kB	0%

View detailed bundle stats

desktop-client

Total

Files count	Total bundle size	% Changed
37	14.14 MB → 14.14 MB (+739 B)	+0.00%

Changeset

File	Δ	Size
`src/hooks/useMetaThemeColor.ts`	📈 +833 B (+52.49%)	1.55 kB → 2.36 kB
`src/components/FinancesApp.tsx`	📉 -25 B (-0.13%)	19.02 kB → 18.99 kB
`src/components/manager/ManagementApp.tsx`	📉 -69 B (-0.89%)	7.56 kB → 7.49 kB

View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger

Asset	File Size	% Changed
static/js/index.js	1.6 MB → 1.6 MB (+739 B)	+0.04%

Smaller
No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/BackgroundImage.js	121.09 kB	0%
static/js/FormulaEditor.js	962.55 kB	0%
static/js/ManageRules.js	46.63 kB	0%
static/js/PayeeRuleCountLabel.js	7.33 kB	0%
static/js/ReportRouter.js	1.27 MB	0%
static/js/ScheduleEditForm.js	146.57 kB	0%
static/js/SchedulesTable.js	206.3 kB	0%
static/js/TransactionEdit.js	90.63 kB	0%
static/js/TransactionList.js	85.81 kB	0%
static/js/Value.js	5.08 MB	0%
static/js/_baseIsEqual.js	98.38 kB	0%
static/js/ca.js	185.63 kB	0%
static/js/client.js	451.37 kB	0%
static/js/da.js	100.19 kB	0%
static/js/de.js	181.63 kB	0%
static/js/en-GB.js	9.25 kB	0%
static/js/en.js	201.71 kB	0%
static/js/es.js	177.58 kB	0%
static/js/extends.js	508.79 kB	0%
static/js/fr.js	177.35 kB	0%
static/js/indexeddb-main-thread-worker-e59fee74.js	13.46 kB	0%
static/js/it.js	163.93 kB	0%
static/js/narrow.js	365.05 kB	0%
static/js/nb-NO.js	147.07 kB	0%
static/js/nl.js	119.71 kB	0%
static/js/pt-BR.js	187.34 kB	0%
static/js/resize-observer.js	18.06 kB	0%
static/js/th.js	173.33 kB	0%
static/js/theme.js	31.88 kB	0%
static/js/toString.js	705.18 kB	0%
static/js/uk.js	216.7 kB	0%
static/js/useFormatList.js	2.52 kB	0%
static/js/useTransactionBatchActions.js	9.71 kB	0%
static/js/wide.js	298.88 kB	0%
static/js/workbox-window.prod.es5.js	7.33 kB	0%
static/js/zh-Hans.js	116.44 kB	0%

loot-core

Total

Files count	Total bundle size	% Changed
1	5.28 MB	0%

View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.C3iXgrGb.js	5.28 MB	0%

api

Total

Files count	Total bundle size	% Changed
2	3.87 MB	0%

View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset	File Size	% Changed
index.js	3.87 MB	0%
models.js	0 B	0%

cli

Total

Files count	Total bundle size	% Changed
1	7.97 MB	0%

View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset	File Size	% Changed
cli.js	7.97 MB	0%

crdt

Total

Files count	Total bundle size	% Changed
1	11.12 kB	0%

View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset	File Size	% Changed
index.js	11.12 kB	0%

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/8181 **Author:** [@PaolinPaperin](https://github.com/PaolinPaperin) **Created:** 6/10/2026 **Status:** ✅ Merged **Merged:** 6/10/2026 **Merged by:** [@MikesGlitch](https://github.com/MikesGlitch) **Base:** `master` ← **Head:** `codex/fix-desktop-pwa-titlebar-color` --- ### 📝 Commits (2) - [`b205518`](https://github.com/actualbudget/actual/commit/b2055189bff91371a6e2f5031bc9aefa6402f61d) [AI] Fix desktop PWA title bar theme color - [`25498c0`](https://github.com/actualbudget/actual/commit/25498c094dd1e5197988d17c690e573cf415e3c8) [AI] Re-trigger CI after transient VRT runner image-pull failure ### 📊 Changes **5 files changed** (+96 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/FinancesApp.tsx` (+1 -1) 📝 `packages/desktop-client/src/components/manager/ManagementApp.tsx` (+1 -5) 📝 `packages/desktop-client/src/hooks/useMetaThemeColor.test.ts` (+48 -1) 📝 `packages/desktop-client/src/hooks/useMetaThemeColor.ts` (+40 -3) ➕ `upcoming-release-notes/fix-pwa-titlebar-theme-color.md` (+6 -0) </details> ### 📄 Description  ## Description Fixes the browser/PWA title-bar (theme) color on macOS desktop. Previously only narrow/mobile layouts updated `<meta name="theme-color">`; on wide desktop layouts both `FinancesApp` and `ManagementApp` passed `undefined` to `useMetaThemeColor`, so the chrome kept the static `#5c3dbb` fallback from `index.html`. In an installed Safari PWA that left the macOS title bar stuck on purple instead of following the app. This uses the app's mobile **header** color for the desktop title bar too — `theme.mobileViewTheme` for the budget app and `theme.mobileConfigServerViewTheme` for the file-manager/config screens — so the installed PWA and Safari's desktop chrome match the mobile header consistently and stay theme-aware (the value differs per theme). Thanks to @Juulz for suggesting the mobile header color over the page/sidebar background. It also updates `useMetaThemeColor` to listen for `prefers-color-scheme` changes, so switching macOS appearance between light and dark updates the title bar without a manual refresh. ## Screenshots ### Before #### Standard Light Theme - Before (Safari) <img width="3260" height="2582" alt="before_dekstop_safari" src="https://github.com/user-attachments/assets/cff97813-f5ea-4faf-b2a2-895731034caa" /> #### Standard Light Theme - Before (PWA) <img width="3274" height="2202" alt="before_desktop" src="https://github.com/user-attachments/assets/95799860-fc4d-448b-a79e-c3ab8d860301" /> #### Custom Theme - Before (PWA) <img width="3274" height="2202" alt="before_desktop2" src="https://github.com/user-attachments/assets/aa63ce75-d3c8-4453-b908-5eacc0f4dc6a" /> ### After #### Standard Light Theme - After (Safari) <img width="3524" height="2724" alt="safari_light_mobile" src="https://github.com/user-attachments/assets/0064ae36-cc0d-4673-b808-2501a0050fc8" /> #### Custom Theme - After (Safari) <img width="3524" height="2724" alt="safari_custom_theme_mobile" src="https://github.com/user-attachments/assets/f6c3fb8f-a7fc-4784-81a8-58fdaa0a272f" /> #### Custom Themes - After (PWA) <img width="3442" height="2412" alt="pwa_custom_theme-mobile" src="https://github.com/user-attachments/assets/35b6408d-75e9-48b0-a97c-1eb642e22e95" /> <img width="3442" height="2412" alt="pwa_custom_theme-mobile-dark" src="https://github.com/user-attachments/assets/82160810-e622-413d-91fa-f1a843999892" /> <img width="3442" height="2412" alt="pwa_custom_theme_mobile" src="https://github.com/user-attachments/assets/7ff2fdb9-ada2-4fc2-b478-ddde589ab173" />  ## Related issue(s)  ## Testing Verified with: - `corepack yarn workspace @actual-app/web run test useMetaThemeColor.test.ts` - `corepack yarn typecheck` - `corepack yarn lint:fix` - `corepack yarn test` Manual testing: - Installed Actual as a Safari PWA on macOS. - Confirmed the PWA title bar follows the active app theme instead of staying purple. - Confirmed normal Safari's toolbar now follows the active app theme instead of staying visually separate from the page. - Confirmed switching macOS system appearance between light and dark updates the title/browser chrome without requiring a refresh. ## Checklist - [x] Release notes added (see link above) - [x] No obvious regressions in affected areas - [x] Self-review has been performed - I have read every line of this diff and can explain what each change does and why it is needed  <hr />  ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 37 | 14.14 MB → 14.14 MB (+739 B) | +0.00% loot-core | 1 | 5.28 MB | 0% api | 2 | 3.87 MB | 0% cli | 1 | 7.97 MB | 0% crdt | 1 | 11.12 kB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 37 | 14.14 MB → 14.14 MB (+739 B) | +0.00% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `src/hooks/useMetaThemeColor.ts` | 📈 +833 B (+52.49%) | 1.55 kB → 2.36 kB `src/components/FinancesApp.tsx` | 📉 -25 B (-0.13%) | 19.02 kB → 18.99 kB `src/components/manager/ManagementApp.tsx` | 📉 -69 B (-0.89%) | 7.56 kB → 7.49 kB </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 1.6 MB → 1.6 MB (+739 B) | +0.04% **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/BackgroundImage.js | 121.09 kB | 0% static/js/FormulaEditor.js | 962.55 kB | 0% static/js/ManageRules.js | 46.63 kB | 0% static/js/PayeeRuleCountLabel.js | 7.33 kB | 0% static/js/ReportRouter.js | 1.27 MB | 0% static/js/ScheduleEditForm.js | 146.57 kB | 0% static/js/SchedulesTable.js | 206.3 kB | 0% static/js/TransactionEdit.js | 90.63 kB | 0% static/js/TransactionList.js | 85.81 kB | 0% static/js/Value.js | 5.08 MB | 0% static/js/_baseIsEqual.js | 98.38 kB | 0% static/js/ca.js | 185.63 kB | 0% static/js/client.js | 451.37 kB | 0% static/js/da.js | 100.19 kB | 0% static/js/de.js | 181.63 kB | 0% static/js/en-GB.js | 9.25 kB | 0% static/js/en.js | 201.71 kB | 0% static/js/es.js | 177.58 kB | 0% static/js/extends.js | 508.79 kB | 0% static/js/fr.js | 177.35 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 163.93 kB | 0% static/js/narrow.js | 365.05 kB | 0% static/js/nb-NO.js | 147.07 kB | 0% static/js/nl.js | 119.71 kB | 0% static/js/pt-BR.js | 187.34 kB | 0% static/js/resize-observer.js | 18.06 kB | 0% static/js/th.js | 173.33 kB | 0% static/js/theme.js | 31.88 kB | 0% static/js/toString.js | 705.18 kB | 0% static/js/uk.js | 216.7 kB | 0% static/js/useFormatList.js | 2.52 kB | 0% static/js/useTransactionBatchActions.js | 9.71 kB | 0% static/js/wide.js | 298.88 kB | 0% static/js/workbox-window.prod.es5.js | 7.33 kB | 0% static/js/zh-Hans.js | 116.44 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 5.28 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.C3iXgrGb.js | 5.28 MB | 0% </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 2 | 3.87 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 3.87 MB | 0% models.js | 0 B | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 7.97 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- cli.js | 7.97 MB | 0% </div> </details> --- #### crdt **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 11.12 kB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 11.12 kB | 0% </div> </details> </details>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-06-11 21:14:30 -05:00

GiteaMirror closed this issue

2026-06-11 21:14:36 -05:00

Sign in to join this conversation.

Branches Tags

master

worktree-pr-description-rules

worktree-count-points-gh-bot

theme-number-contrast

theme-contrast-test

fix/automatic-bank-sync-mobile-app

jfdoming/api-key-shared-bank-sync

claude/lucid-turing-br8zwl

future-buffer

carryover-chain

copilot/fix-failing-github-actions-job

copilot/fix-failing-github-actions-job-compare

fix/hide-sab-warning-in-capacitor

release

tabedzki/feat/docker-non-root

ios-home-screen-widgets

mobile-budget-redesign

ai/fix-mobile-carryover-arrow-alignment

jfdoming/provider-identity-update

jfdoming/electron-signin-update

jfdoming/openid-flow-update

release-update/26.10.1

release-notes/26.10.1

matiss/dazzling-babbage-b9rjwi

react-query-rules

ai/add-loan-formula-autocomplete

claude/pr-8519-regression-testing-fhvrrh

speed-up-transaction-list-and-schedules

fix-slow-balance-recompute-on-transaction-edit

jfdoming/opfs-sahpool-mobile

jfdoming/opfs-sahpool

fix-8612-schedule-delete-menu

jfdoming/api-tokens-part-8

jfdoming/api-tokens-part-7

jfdoming/api-tokens-part-6

jfdoming/api-tokens-part-5

jfdoming/mobile-safe-area-header

jfdoming/api-tokens-part-4

jfdoming/mobile-splash-lifecycle

jfdoming/api-tokens-part-3

jfdoming/mobile-shared-array-buffer

jfdoming/api-tokens-part-2

jfdoming/api-tokens-part-1

persist-transaction-filters

claude/modernize-transactions-tanstack-orgrze

bank-sync-per-file-03-pluggy-loot-core

claude/auto-close-prs-no-profile-pic-mjqpsy

cross-version-sync-stage2

claude/react-table-library-research-afx83z

tolerate-newer-migrations

claude/verify-migration-guardrails-i82c8m

tabedzki/feat/replacing-month-picker-with-day-picker

delay-initial-sync-until-loaded

cross-version-sync-compat

jfdoming/mobile-app-updates

claude/budget-version-migration-compat-151jlr

claude/worker-error-serialization-9iqtl7

claude/issue-8401-regression-test-9nw9l3

jfdoming/mobile-app-foundation-part-1

jfdoming/mobile-app-scaffold

ai-fix-cleanup-def-8290

claude/relaxed-shannon-jusywa

claude/fervent-keller-s6f2fq

claude/determined-feynman-st1y9z

claude/wizardly-einstein-vi2wce

claude/sweet-albattani-7nseio

feat/bank-sync-per-budget-file

claude/affectionate-cannon-y0kc82

claude/dependabot-findings-m9pgmb

claude/mac-app-ios-publish-zjs1lz

claude/vigilant-tesla-aiiyos

claude/quirky-cerf-v5qck7

claude/animation-removal-alternative-2etfh1

claude/netlify-preview-comments-consolidate-9XPYa

osc/7391-error-boundaries-reports

claude/pensive-dijkstra-7DYui

claude/server-app-version-mismatch-HTCGv

claude/pr-8027-review-feedback-mELuO

claude/zealous-wozniak-e5pO0

claude/intelligent-heisenberg-BSHJq

claude/translation-download-refactor-jFRsO

claude/mobile-performance-ideas-G9PAO

claude/github-issue-7988-5A5ly

blacksmith-migration-ff70d2d

claude/great-mayer-KRvOk

claude/react-native-ios-compilation-fcJh5

claude/serene-goldberg-58xv0

claude/kind-euler-LVG3K

release-automation/edge-nightly

7710-bundle-migrations

claude/fix-docker-build-error-WMfed

claude/llm-compatible-release-notes-t20Nr

7710-tests-tdd

cursor/transaction-table-rewrite-f077

claude/plan-ci-secure-context-OtEe1

claude/fix-issue-7667-DPXi3

cursor/resolve-pr-7449-ee11

claude/fix-typescript-build-error-JPtZ5

copilot/add-repository-configs-to-packages

worktree-compressed-drifting-ritchie

claude/api-consumer-verification-kfz1K

pr-7454

claude/fix-issue-7410-LLLQ4

revert-7281-generate-icons

react-query-useSchedules

copilot/sub-pr-6140

package-upgrades

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/actual#122392