[PR #1604] [MERGED] 🐛 Mobile: fix Accounts page theme color #3844

Closed
opened 2026-02-28 20:47:38 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/1604
Author: @trevdor
Created: 8/29/2023
Status: Merged
Merged: 9/1/2023
Merged by: @trevdor

Base: masterHead: trevdor-mobile-accounts-header-color


📝 Commits (10+)

  • 223a896 🐛 Mobile: fix Accounts page theme color
  • 8fca3a3 release notes
  • c35a2e8 Fix MobileAccount useSetThemeColor as well
  • 9945eeb fixup! Fix MobileAccount useSetThemeColor as well
  • 8972356 Different approach: read CSS custom properties
  • 18c9117 fixup! Different approach: read CSS custom properties
  • e8ef0ac fixup! Different approach: read CSS custom properties
  • c42dbc0 unneeded comment
  • 383c835 PR feedback: fix Account page theme
  • 706ac21 Let's just get all the view themes respecting our new theming scheme

📊 Changes

10 files changed (+42 additions, -10 deletions)

View changed files

📝 packages/desktop-client/src/components/accounts/MobileAccount.js (+1 -1)
📝 packages/desktop-client/src/components/accounts/MobileAccounts.js (+1 -1)
📝 packages/desktop-client/src/components/budget/MobileBudget.js (+2 -2)
📝 packages/desktop-client/src/components/manager/ConfigServer.tsx (+2 -2)
📝 packages/desktop-client/src/components/settings/index.tsx (+2 -2)
📝 packages/desktop-client/src/components/transactions/MobileTransaction.js (+1 -1)
📝 packages/desktop-client/src/hooks/useSetThemeColor.ts (+11 -1)
📝 packages/desktop-client/src/style/themes/dark.ts (+8 -0)
📝 packages/desktop-client/src/style/themes/light.ts (+8 -0)
upcoming-release-notes/1604.md (+6 -0)

📄 Description

Fixes #1598

Root Cause

Our useSetThemeColor hook manipulates the theme-color meta tag:

<meta name="theme-color" content="#3c790a">

The content value cannot be a CSS custom property.

Solution

Use the hex value foruseSetThemeColor. But grab this hex value out of the theme variable so it still respects the theme.

Additional Changes

As long as I was changing more than one useSetThemeColor, went ahead and created theme values for all views that theme the top bar. For starters, they're the same in light & dark themes.


🔄 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/1604 **Author:** [@trevdor](https://github.com/trevdor) **Created:** 8/29/2023 **Status:** ✅ Merged **Merged:** 9/1/2023 **Merged by:** [@trevdor](https://github.com/trevdor) **Base:** `master` ← **Head:** `trevdor-mobile-accounts-header-color` --- ### 📝 Commits (10+) - [`223a896`](https://github.com/actualbudget/actual/commit/223a8964705f4f4c57ebe0f567f0c79a4a0a64ee) :bug: Mobile: fix Accounts page theme color - [`8fca3a3`](https://github.com/actualbudget/actual/commit/8fca3a36bb5aa881e6906534aab3772211fc1b12) release notes - [`c35a2e8`](https://github.com/actualbudget/actual/commit/c35a2e871a964e2e5994c49d541e8f5741eb28da) Fix MobileAccount useSetThemeColor as well - [`9945eeb`](https://github.com/actualbudget/actual/commit/9945eeb3dc9287b4853ad38bf80e3124d442fed2) fixup! Fix MobileAccount useSetThemeColor as well - [`8972356`](https://github.com/actualbudget/actual/commit/897235643f1d0bfe7a1a61fa0db98727f7ec9c27) Different approach: read CSS custom properties - [`18c9117`](https://github.com/actualbudget/actual/commit/18c91176cdef2ed714e4e227d613039f6433c1ac) fixup! Different approach: read CSS custom properties - [`e8ef0ac`](https://github.com/actualbudget/actual/commit/e8ef0ac49f96a42e21da28e69b4dbbb4da8a3f0e) fixup! Different approach: read CSS custom properties - [`c42dbc0`](https://github.com/actualbudget/actual/commit/c42dbc0d1f1e2e101e08d9dc8f656e2b3477dbb4) unneeded comment - [`383c835`](https://github.com/actualbudget/actual/commit/383c835a440b7f77eebb135b766663f13457d421) PR feedback: fix Account page theme - [`706ac21`](https://github.com/actualbudget/actual/commit/706ac215c5170fd53d645fe6ac6c460cf2a8e745) Let's just get all the view themes respecting our new theming scheme ### 📊 Changes **10 files changed** (+42 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/accounts/MobileAccount.js` (+1 -1) 📝 `packages/desktop-client/src/components/accounts/MobileAccounts.js` (+1 -1) 📝 `packages/desktop-client/src/components/budget/MobileBudget.js` (+2 -2) 📝 `packages/desktop-client/src/components/manager/ConfigServer.tsx` (+2 -2) 📝 `packages/desktop-client/src/components/settings/index.tsx` (+2 -2) 📝 `packages/desktop-client/src/components/transactions/MobileTransaction.js` (+1 -1) 📝 `packages/desktop-client/src/hooks/useSetThemeColor.ts` (+11 -1) 📝 `packages/desktop-client/src/style/themes/dark.ts` (+8 -0) 📝 `packages/desktop-client/src/style/themes/light.ts` (+8 -0) ➕ `upcoming-release-notes/1604.md` (+6 -0) </details> ### 📄 Description Fixes #1598 ### Root Cause Our `useSetThemeColor` hook manipulates the `theme-color` meta tag: ``` <meta name="theme-color" content="#3c790a"> ``` The `content` value cannot be a CSS custom property. ### Solution Use the hex value for`useSetThemeColor`. But grab this hex value out of the theme variable so it still respects the theme. ### Additional Changes As long as I was changing more than one `useSetThemeColor`, went ahead and created theme values for all views that theme the top bar. For starters, they're the same in light & dark themes. --- <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-02-28 20:47:38 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#3844