diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
index 875c74a4a9d930cacbff1f3b528fa6ac05fb4cc1..b7d05dc8421e9ee5e366268dfb80e31a901047ca 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccount.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -167,7 +167,7 @@ export default function Account(props) {
 
   useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
 
-  useSetThemeColor(theme.altMenuItemTextHover);
+  useSetThemeColor(theme.mobileAccountViewTheme);
 
   if (!accounts || !accounts.length) {
     return null;
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 83770cfc9f46ee248120ae0b8a37e69a06fff588..73be0521f3793bac30a55b86698ec626be89e76b 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -275,7 +275,7 @@ export default function Accounts() {
     navigate(`/transaction/${transaction}`);
   };
 
-  useSetThemeColor(theme.altMenuBackground);
+  useSetThemeColor(theme.mobileAccountsViewTheme);
 
   return (
     <View style={{ flex: 1 }}>
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index 52b2912bef285bf967d95d0433f1c18786290e37..0486a5b329dfcc14d93857a763f002b83f5b81ec 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -13,7 +13,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../../hooks/useActions';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import View from '../common/View';
 import SyncRefresh from '../SyncRefresh';
 
@@ -303,7 +303,7 @@ export default function BudgetWrapper() {
   let actions = useActions();
   let spreadsheet = useSpreadsheet();
 
-  useSetThemeColor(colors.p5);
+  useSetThemeColor(theme.mobileBudgetViewTheme);
   return (
     <Budget
       categoryGroups={categoryGroups}
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
index 7dbda7758435e0a1ed3ae0de8d2ec76cefea336a..8934024d207ddc63628430e6cec55c65d51c3cea 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.tsx
+++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -8,7 +8,7 @@ import {
 
 import { useActions } from '../../hooks/useActions';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
-import { colors } from '../../style';
+import { colors, theme } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';
 import { BigInput } from '../common/Input';
 import Text from '../common/Text';
@@ -18,7 +18,7 @@ import { useServerURL, useSetServerURL } from '../ServerContext';
 import { Title } from './subscribe/common';
 
 export default function ConfigServer() {
-  useSetThemeColor(colors.p5);
+  useSetThemeColor(theme.mobileConfigServerViewTheme);
   let { createBudget, signOut, loggedIn } = useActions();
   let navigate = useNavigate();
   let [url, setUrl] = useState('');
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index cfd38ca00f8e232b16612856caa84a4a7f83a3e7..5771954a503f2cf10c9854ee510bd6a0d23fa000 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -11,7 +11,7 @@ import useFeatureFlag from '../../hooks/useFeatureFlag';
 import useLatestVersion, { useIsOutdated } from '../../hooks/useLatestVersion';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { useResponsive } from '../../ResponsiveProvider';
-import { colors } from '../../style';
+import { colors, theme } from '../../style';
 import tokens from '../../tokens';
 import Button from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
@@ -133,7 +133,7 @@ export default function Settings() {
   const { isNarrowWidth } = useResponsive();
   const themesFlag = useFeatureFlag('themes');
 
-  useSetThemeColor(colors.n11);
+  useSetThemeColor(theme.mobileSettingsViewTheme);
   return (
     <View
       style={{
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 7dcf4007aa519a2706e7ad29102cbe0705cf5580..d1eefb348565004a75e6086b07583db223528b85 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -698,7 +698,7 @@ function TransactionEditUnconnected(props) {
   let adding = false;
   let deleted = false;
 
-  useSetThemeColor(colors.p5);
+  useSetThemeColor(theme.mobileTransactionViewTheme);
 
   useEffect(() => {
     // May as well update categories / accounts when transaction ID changes
diff --git a/packages/desktop-client/src/hooks/useSetThemeColor.ts b/packages/desktop-client/src/hooks/useSetThemeColor.ts
index 15509fa7a7d48b9257a86505acfcfc2ec41e01c4..117181ddcb26a46ffa0908fe2e9697098d81b0d4 100644
--- a/packages/desktop-client/src/hooks/useSetThemeColor.ts
+++ b/packages/desktop-client/src/hooks/useSetThemeColor.ts
@@ -1,8 +1,10 @@
 import { useEffect } from 'react';
 
+const VAR_STRING_REGEX = /^var\((--.*)\)$/;
+
 export function useSetThemeColor(color: string) {
   useEffect(() => {
-    setThemeColor(color);
+    setThemeColor(getPropertyValueFromVarString(color));
   }, [color]);
 }
 
@@ -11,3 +13,11 @@ function setThemeColor(color: string) {
   const themeTag = [...metaTags].find(tag => tag.name === 'theme-color');
   themeTag.setAttribute('content', color);
 }
+
+function getPropertyValueFromVarString(varString: string) {
+  return VAR_STRING_REGEX.test(varString)
+    ? window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue(varString.match(VAR_STRING_REGEX)[1])
+    : varString;
+}
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 964a67da10ba04e9a0c38db04b0745e97b160140..e2691ec83f1ab7b0c57248e514dc7cef2f3f74f9 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -83,6 +83,14 @@ export const mobileNavItemSelected = colorPalette.purple400;
 export const mobileAccountShadow = cardShadow;
 export const mobileAccountText = colorPalette.blue800;
 
+// Mobile view themes (for the top bar)
+export const mobileAccountViewTheme = colorPalette.navy50;
+export const mobileAccountsViewTheme = colorPalette.blue800;
+export const mobileBudgetViewTheme = colorPalette.purple500;
+export const mobileConfigServerViewTheme = colorPalette.purple500;
+export const mobileSettingsViewTheme = colorPalette.navy50;
+export const mobileTransactionViewTheme = colorPalette.purple500;
+
 // Button
 export const buttonMenuText = colorPalette.navy100;
 export const buttonMenuTextHover = colorPalette.navy50;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index af72c18fedb573a9be7bb900f4fe991b9949d170..aded0c4476861a9258030091bcb53e2af4345405 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -83,6 +83,14 @@ export const mobileNavItemSelected = colorPalette.purple500;
 export const mobileAccountShadow = colorPalette.navy300;
 export const mobileAccountText = colorPalette.blue800;
 
+// Mobile view themes (for the top bar)
+export const mobileAccountViewTheme = colorPalette.navy50;
+export const mobileAccountsViewTheme = colorPalette.blue800;
+export const mobileBudgetViewTheme = colorPalette.purple500;
+export const mobileConfigServerViewTheme = colorPalette.purple500;
+export const mobileSettingsViewTheme = colorPalette.navy50;
+export const mobileTransactionViewTheme = colorPalette.purple500;
+
 // Button
 export const buttonMenuText = colorPalette.navy100;
 export const buttonMenuTextHover = colorPalette.navy50;
diff --git a/upcoming-release-notes/1604.md b/upcoming-release-notes/1604.md
new file mode 100644
index 0000000000000000000000000000000000000000..f9736dda9c37d55ce6dbcd40fa717e316d1dff48
--- /dev/null
+++ b/upcoming-release-notes/1604.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [trevdor]
+---
+
+Mobile: fix regression of Accounts page theme