diff --git a/packages/desktop-client/e2e/accounts.test.js b/packages/desktop-client/e2e/accounts.test.js
index 878e3c35421cc431afa0a491552e655ca9dd47a9..45ca7096a28f030992e0639f150c6a6f28bcbce9 100644
--- a/packages/desktop-client/e2e/accounts.test.js
+++ b/packages/desktop-client/e2e/accounts.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Accounts', () => {
   let page;
@@ -35,7 +34,7 @@ test.describe('Accounts', () => {
     await expect(transaction.category).toHaveText('Starting Balances');
     await expect(transaction.debit).toHaveText('');
     await expect(transaction.credit).toHaveText('100.00');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('closes an account', async () => {
@@ -45,10 +44,10 @@ test.describe('Accounts', () => {
 
     const modal = await accountPage.clickCloseAccount();
     await modal.selectTransferAccount('Vanguard 401k');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
     await modal.closeAccount();
 
     await expect(accountPage.accountName).toHaveText('Closed: Roth IRA');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
index 6de2e744ef3b837ea42650d413d4fa10a377d716..1358b9282668ad739b5ebde4e60ce4018b652e72 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
index 861f3c8cc8be14383faefa4fe7bce2e76c56a0c0..e87e4e7fd29c9590b9dbf48618ff6fbb09c8b2d6 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..06f3377a2afd64babb35fe6ba505f26827d28839
Binary files /dev/null and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3725305798fe32c1028a060de7efaffe612e87e8
Binary files /dev/null and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-closes-an-account-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png
index a186c1bbb8d50e82f26f2e4cd81b66558c3e0471..1f4d1477c501384b248a14813031194359fa4b15 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd2f370a7066dd450d649687d2cd59814e6da30a
Binary files /dev/null and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-creates-a-new-account-and-views-the-initial-balance-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js b/packages/desktop-client/e2e/budget.test.js
index f868c582a3a3a7f3dd07d4248d0affd9938f4578..95404837f5bbaf2a8ca1f598f340c10ac735c7fd 100644
--- a/packages/desktop-client/e2e/budget.test.js
+++ b/packages/desktop-client/e2e/budget.test.js
@@ -1,7 +1,6 @@
 import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Budget', () => {
   let page;
@@ -34,7 +33,7 @@ test.describe('Budget', () => {
     await expect(summary.getByText(/^Overspent in /)).toBeVisible();
     await expect(summary.getByText('Budgeted')).toBeVisible();
     await expect(summary.getByText('For Next Month')).toBeVisible();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('transfer funds to another category', async () => {
@@ -47,7 +46,7 @@ test.describe('Budget', () => {
     expect(await budgetPage.getBalanceForRow(2)).toEqual(
       currentFundsA + currentFundsB,
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('budget table is rendered', async () => {
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f04a3330cc34b122c773caedf9793c60538b3ca1
Binary files /dev/null and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-renders-the-summary-information-available-funds-overspent-budgeted-and-for-next-month-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..767f0f0688fb235dbdb200ce05299d0569c9ec06
Binary files /dev/null and b/packages/desktop-client/e2e/budget.test.js-snapshots/Budget-transfer-funds-to-another-category-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js b/packages/desktop-client/e2e/mobile.test.js
index d7fdda7cc46d24d2cb15b2058ecd7ff755044712..fa53ecd515283c71ec8ecc43d562266f04186487 100644
--- a/packages/desktop-client/e2e/mobile.test.js
+++ b/packages/desktop-client/e2e/mobile.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { MobileNavigation } from './page-models/mobile-navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Mobile', () => {
   let page;
@@ -44,7 +43,7 @@ test.describe('Mobile', () => {
       'Water',
       'Power',
     ]);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('opens the accounts page and asserts on balances', async () => {
@@ -54,7 +53,7 @@ test.describe('Mobile', () => {
 
     await expect(account.name).toHaveText('Ally Savings');
     await expect(account.balance).toHaveText('7,653.00');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('opens individual account page and checks that filtering is working', async () => {
@@ -65,21 +64,21 @@ test.describe('Mobile', () => {
     expect(await accountPage.getBalance()).toBeGreaterThan(0);
 
     await expect(accountPage.noTransactionsFoundError).not.toBeVisible();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await accountPage.searchByText('nothing should be found');
     await expect(accountPage.noTransactionsFoundError).toBeVisible();
     await expect(accountPage.transactions).toHaveCount(0);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await accountPage.searchByText('Kroger');
     await expect(accountPage.transactions).not.toHaveCount(0);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a transaction via footer button', async () => {
     const transactionEntryPage = await navigation.goToTransactionEntryPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await expect(transactionEntryPage.header).toHaveText('New Transaction');
 
@@ -96,14 +95,14 @@ test.describe('Mobile', () => {
       page.getByTestId('account-field'),
       'Ally Savings',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     const accountPage = await transactionEntryPage.createTransaction();
 
     await expect(accountPage.transactions.nth(0)).toHaveText(
       'KrogerClothing-12.34',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a transaction from `/accounts/:id` page', async () => {
@@ -112,7 +111,7 @@ test.describe('Mobile', () => {
     const transactionEntryPage = await accountPage.clickCreateTransaction();
 
     await expect(transactionEntryPage.header).toHaveText('New Transaction');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await transactionEntryPage.amountField.fill('12.34');
     await transactionEntryPage.fillField(
@@ -133,7 +132,7 @@ test.describe('Mobile', () => {
 
   test('checks that settings page can be opened', async () => {
     const settingsPage = await navigation.goToSettingsPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     const downloadPromise = page.waitForEvent('download');
 
@@ -144,6 +143,6 @@ test.describe('Mobile', () => {
     expect(await download.suggestedFilename()).toMatch(
       /^\d{4}-\d{2}-\d{2}-.*.zip$/,
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png
index 22186d8338967359b28beaa7f6d2ae505e322001..25eeeab52be1ef25e9626a989347c9e571371981 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..46bf1b79121d31376fe0539a4e2e25801afbf614
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3de1d448773b8cd5c37165660a859bbfe74783a9
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-from-accounts-id-page-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-from-accounts-id-page-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..bba9c466635852e1778bf4984d756a243827984b
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-from-accounts-id-page-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-2-chromium-linux.png
index 65935ac1424786566e33d51e4540b02353a15456..a7777737adf57ab95ba706ecea72e4b476df7120 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-3-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-3-chromium-linux.png
index 2dd2bdc648c578201a520e925d6536fae64f6ae9..01f9ba542a36f1e314147d2fcb36eb059fa5a8c3 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-3-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-4-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0071e75e912e8920d2239646a9efddb908038922
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-5-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-5-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f9429c5209e718ccbc0156a5241ce9febdbbbbc
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-6-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-6-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc388832ed4dc450c5819448cfbf661ad7aad44e
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-via-footer-button-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae75ed2b3f1318cee0cd58dd7da4078db5f370e5
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png
index 061d910343ae2f8690bd1df761f5af5458cd5700..b4ac3b47f363c55cd364c9e27ccacaada3d52748 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png
index f4481614526817f85028c1df47ffa924faba4f8e..061d910343ae2f8690bd1df761f5af5458cd5700 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..47f1dd9c989db8ae7d4f03bc4e0b564750089c1a
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f9ef206aa1f39ad97ca0dc3afe4a99db3d85de2
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f82bce4b37045e8e48f46f202e493ce301553a7
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..de102f9e230f67f796662a43533d9fa8af136dd8
Binary files /dev/null and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/onboarding.test.js b/packages/desktop-client/e2e/onboarding.test.js
index 98c5b28c083d565d0710b60edae7f82c29548502..78d5aa0a8f1a960d67f856ae9be7e042538a91eb 100644
--- a/packages/desktop-client/e2e/onboarding.test.js
+++ b/packages/desktop-client/e2e/onboarding.test.js
@@ -5,7 +5,6 @@ import { test, expect } from '@playwright/test';
 import { AccountPage } from './page-models/account-page';
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Onboarding', () => {
   let page;
@@ -26,10 +25,10 @@ test.describe('Onboarding', () => {
 
   test('checks the page visuals', async () => {
     await expect(configurationPage.heading).toHaveText('Where’s the server?');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await configurationPage.clickOnNoServer();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a new budget file by importing YNAB4 budget', async () => {
diff --git a/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-2-chromium-linux.png
index ed62336bdf97e05f39b4d76269b1cecc544b2808..d282442e86210c457dd2dc9fba41b7cb4f5fcb28 100644
Binary files a/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-3-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed62336bdf97e05f39b4d76269b1cecc544b2808
Binary files /dev/null and b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-4-chromium-linux.png b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3cea84a41e7e7845249fdb1f08aa28c88adb1e0
Binary files /dev/null and b/packages/desktop-client/e2e/onboarding.test.js-snapshots/Onboarding-checks-the-page-visuals-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js b/packages/desktop-client/e2e/reports.test.js
index 54db8e5c48daaef545f5f9ac56c59238a9823f62..1dc4b88047a0ae7328618b5ad08d471ad9fa5773 100644
--- a/packages/desktop-client/e2e/reports.test.js
+++ b/packages/desktop-client/e2e/reports.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Reports', () => {
   let page;
@@ -32,16 +31,16 @@ test.describe('Reports', () => {
     const reports = await reportsPage.getAvailableReportList();
 
     expect(reports).toEqual(['Net Worth', 'Cash Flow']);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('loads net worth graph and checks visuals', async () => {
     await reportsPage.goToNetWorthPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('loads cash flow graph and checks visuals', async () => {
     await reportsPage.goToCashFlowPage();
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..624551b28e2cdfdf88b39b438197538978a2aece
Binary files /dev/null and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a691d9ff8999f0135837762390010f2d98fb8be
Binary files /dev/null and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7c63ff0e5141419b4be7effd51cf8c275b467ff
Binary files /dev/null and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js b/packages/desktop-client/e2e/rules.test.js
index bec8a475e8f565d9e30ee0fb573333064d111418..4de98db6dfb2c25e16dce688397c2473e996b746 100644
--- a/packages/desktop-client/e2e/rules.test.js
+++ b/packages/desktop-client/e2e/rules.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Rules', () => {
   let page;
@@ -29,7 +28,7 @@ test.describe('Rules', () => {
 
   test('checks the page visuals', async () => {
     await rulesPage.searchFor('Dominion');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a rule and makes sure it is applied when creating a transaction', async () => {
@@ -53,7 +52,7 @@ test.describe('Rules', () => {
     const rule = rulesPage.getNthRule(0);
     await expect(rule.conditions).toHaveText(['payee is Fast Internet']);
     await expect(rule.actions).toHaveText(['set category to General']);
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     const accountPage = await navigation.goToAccountPage('HSBC');
 
@@ -66,6 +65,6 @@ test.describe('Rules', () => {
     await expect(transaction.payee).toHaveText('Fast Internet');
     await expect(transaction.category).toHaveText('General');
     await expect(transaction.debit).toHaveText('12.34');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..33cc6dda9bd35732db7f1dcaaeda3a89b6a541c4
Binary files /dev/null and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index 6eef92136176d4ee2193b2fc8acce5df47be5911..728f52cea8dd62838c7aeb16bb92c143b09dbcce 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f33f1f96ab968faee531234b0bee8f539d3bda5
Binary files /dev/null and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..54d5d15803b24cd261b0aed855fb823cd12b277f
Binary files /dev/null and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js b/packages/desktop-client/e2e/schedules.test.js
index 593584046573abb58c3dc07cc3c231cb177fda1f..770f0e6ad774fa85f4c362403a934a803c9961bf 100644
--- a/packages/desktop-client/e2e/schedules.test.js
+++ b/packages/desktop-client/e2e/schedules.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Schedules', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Schedules', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a new schedule, posts the transaction and later completes it', async () => {
@@ -43,11 +42,11 @@ test.describe('Schedules', () => {
     await expect(schedule.account).toHaveText('HSBC');
     await expect(schedule.amount).toHaveText('~25.00');
     await expect(schedule.status).toHaveText('Due');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     await schedulesPage.postNthSchedule(2);
     await expect(schedulesPage.getNthSchedule(2).status).toHaveText('Paid');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     // Go to transactions page
     const accountPage = await navigation.goToAccountPage('HSBC');
@@ -77,7 +76,7 @@ test.describe('Schedules', () => {
     await expect(schedulesPage.getNthScheduleRow(4)).toHaveText(
       'Show completed schedules',
     );
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
 
     // Schedules search shouldn't shrink with many schedules
     for (let i = 0; i < 15; i++) {
@@ -87,6 +86,6 @@ test.describe('Schedules', () => {
         amount: 0,
       });
     }
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..94505412d1b732bbde28862ffa9256e8db9cae68
Binary files /dev/null and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
index 00d49fff8827c0f9533d2093a3bd41d1a1cc11b3..1c75b1463dc8c65a60d7fea326c0c76cc73a71d6 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png
index ec25977ca34d553ed7c073b3173963b7404e34b0..9be9b6f41cd4a7f90ea405831a971720dfdef989 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
index 6d48f2320f862d9b1a3e9a574e06640a0aeb969e..0680cf4b2c5edbe7f62a9b522298659f06cbd18c 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3d1af2a663b88c3a3916faa9f2e78a18f551a11
Binary files /dev/null and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..600447e73a78509be6ba327c64ac049b6a2557d2
Binary files /dev/null and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..1366ec299a14a64f852665dcf7347e16f3055e5b
Binary files /dev/null and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b77c4ca07fc6795fa54a7dbe4a4fb9454bcaecc
Binary files /dev/null and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/screenshot.config.js b/packages/desktop-client/e2e/screenshot.config.js
deleted file mode 100644
index 2debabf972cc504ecb8024a3b5079c82830eb8af..0000000000000000000000000000000000000000
--- a/packages/desktop-client/e2e/screenshot.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default function screenshotConfig(page) {
-  return {
-    // eslint-disable-next-line rulesdir/typography
-    mask: [page.locator('[data-vrt-mask="true"]')],
-  };
-}
diff --git a/packages/desktop-client/e2e/settings.test.js b/packages/desktop-client/e2e/settings.test.js
index 0bcf3c00ab84fe6b8b5b5d7fa5308bd32ac8fcb0..bc8029eff46eb6cd4ef23c98dea0364b57de99e6 100644
--- a/packages/desktop-client/e2e/settings.test.js
+++ b/packages/desktop-client/e2e/settings.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Settings', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Settings', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('downloads the export of the budget', async () => {
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..73a467e0c62a58559eb7b0f8eb533a6665d648ec
Binary files /dev/null and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js b/packages/desktop-client/e2e/transactions.test.js
index b715d687c2a550f9f375844276094f382d1caadd..0fc9070ef1c84b3a68d938362ece45e89a9f0e8e 100644
--- a/packages/desktop-client/e2e/transactions.test.js
+++ b/packages/desktop-client/e2e/transactions.test.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
-import screenshotConfig from './screenshot.config';
 
 test.describe('Transactions', () => {
   let page;
@@ -28,7 +27,7 @@ test.describe('Transactions', () => {
   });
 
   test('checks the page visuals', async () => {
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test.describe('filters transactions', () => {
@@ -39,12 +38,12 @@ test.describe('Transactions', () => {
 
     test('by date', async () => {
       const filterTooltip = await accountPage.filterBy('Date');
-      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+      await expect(filterTooltip.page).toMatchThemeScreenshots();
 
       // Open datepicker
       await page.keyboard.press('Space');
       const datepicker = page.getByTestId('date-select-tooltip');
-      await expect(datepicker).toHaveScreenshot(screenshotConfig(page));
+      await expect(datepicker).toMatchThemeScreenshots();
 
       // Select "is xxxxx"
       await datepicker.getByRole('button', { name: '20' }).click();
@@ -52,16 +51,16 @@ test.describe('Transactions', () => {
 
       // Assert that there are no transactions
       await expect(accountPage.transactionTable).toHaveText('No transactions');
-      await expect(page).toHaveScreenshot(screenshotConfig(page));
+      await expect(page).toMatchThemeScreenshots();
     });
 
     test('by category', async () => {
       const filterTooltip = await accountPage.filterBy('Category');
-      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+      await expect(filterTooltip.page).toMatchThemeScreenshots();
 
       // Type in the autocomplete box
       const autocomplete = page.getByTestId('autocomplete');
-      await expect(autocomplete).toHaveScreenshot(screenshotConfig(page));
+      await expect(autocomplete).toMatchThemeScreenshots();
 
       // Select the active item
       await page.getByRole('button', { name: 'Clothing' }).click();
@@ -83,7 +82,7 @@ test.describe('Transactions', () => {
       await expect(accountPage.getNthTransaction(4).category).toHaveText(
         'Clothing',
       );
-      await expect(page).toHaveScreenshot(screenshotConfig(page));
+      await expect(page).toMatchThemeScreenshots();
     });
   });
 
@@ -101,7 +100,7 @@ test.describe('Transactions', () => {
     await expect(transaction.category).toHaveText('Food');
     await expect(transaction.debit).toHaveText('12.34');
     await expect(transaction.credit).toHaveText('');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 
   test('creates a split test transaction', async () => {
@@ -140,6 +139,6 @@ test.describe('Transactions', () => {
     await expect(thirdTransaction.category).toHaveText('Categorize');
     await expect(thirdTransaction.debit).toHaveText('111.11');
     await expect(thirdTransaction.credit).toHaveText('');
-    await expect(page).toHaveScreenshot(screenshotConfig(page));
+    await expect(page).toMatchThemeScreenshots();
   });
 });
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..21988bb4383c0ecb505d811cba60ff8e4e78bdd7
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ccdfee7d9d36cfef88e76a9d248416958172d9a
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-split-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..87c333ea39d3213a403c3c6e84e46d67254f564f
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-creates-a-test-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png
index 06acef3e5467a6b259a5b6bede90d394f8ac78b3..9c8cd497cf499f436b8b0029c484f88c7b83dccf 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png
index aa59979a25ac20a9eb05f0a30a0c1fbb3e44941e..06acef3e5467a6b259a5b6bede90d394f8ac78b3 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..114f554ada2229477122cc1c164c4e580ba506a2
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..02b670d92a8f234404afabada804d010c9239089
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dede0758d342ed280ad0a7af9b100e229c387ab
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-category-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-2-chromium-linux.png
index a5b72beb8df9a6ca64cefdf34a96c5a7ec63ddaa..31980014812150809b84cc0353112bea23d7497b 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-2-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-3-chromium-linux.png
index 76543890428d3c3c753042a6504d9a5dd5b81adb..95df43d212f1d98433d54c1f87d3f413c44c49dc 100644
Binary files a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-3-chromium-linux.png and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-4-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-4-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..45adce6f412deb5fde5bffd24f37595e6ff40f4b
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0715fc33d7d86d45d39352e5ca513772d6ade97a
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6b8dfd030b58107157ab3777905962a33afae31
Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.js-snapshots/Transactions-filters-transactions-by-date-6-chromium-linux.png differ
diff --git a/packages/desktop-client/playwright.config.js b/packages/desktop-client/playwright.config.js
index 87b854e79ab4e74f8936cc2b1fc0942830da36ec..412a7ac28f85545e540aa3f0d9bad9f8dba9cf64 100644
--- a/packages/desktop-client/playwright.config.js
+++ b/packages/desktop-client/playwright.config.js
@@ -1,17 +1,45 @@
 import { expect, defineConfig } from '@playwright/test';
 
-// Disable screenshot assertions in regular e2e tests;
-// only enable them when doing VRT tests
-if (!process.env.VRT) {
-  expect.extend({
-    toHaveScreenshot() {
+expect.extend({
+  async toMatchThemeScreenshots(locator) {
+    // Disable screenshot assertions in regular e2e tests;
+    // only enable them when doing VRT tests
+    if (!process.env.VRT) {
       return {
         message: () => 'passed',
         pass: true,
       };
-    },
-  });
-}
+    }
+
+    const config = {
+      // eslint-disable-next-line rulesdir/typography
+      mask: [locator.locator('[data-vrt-mask="true"]')],
+    };
+
+    // Check lightmode
+    const lightmode = await expect(locator).toHaveScreenshot(config);
+
+    if (lightmode && !lightmode.pass) {
+      return lightmode;
+    }
+
+    // Switch to darkmode and check
+    await locator.evaluate(() => window.Actual.setTheme('dark'));
+    const darkmode = await expect(locator).toHaveScreenshot(config);
+
+    // Assert on
+    if (darkmode && !darkmode.pass) {
+      return darkmode;
+    }
+
+    // Switch back to lightmode
+    await locator.evaluate(() => window.Actual.setTheme('light'));
+    return {
+      message: () => 'pass',
+      pass: true,
+    };
+  },
+});
 
 // eslint-disable-next-line import/no-unused-modules
 export default defineConfig({
diff --git a/packages/desktop-client/src/browser-preload.browser.js b/packages/desktop-client/src/browser-preload.browser.js
index 35b714c3889da5ea087aef00dbfcb57d626e35ac..2fa3e0fae5b4c1ffdc62904b9fe7951782eb2b31 100644
--- a/packages/desktop-client/src/browser-preload.browser.js
+++ b/packages/desktop-client/src/browser-preload.browser.js
@@ -128,6 +128,8 @@ global.Actual = {
   getServerSocket: async () => {
     return worker;
   },
+
+  setTheme: () => {},
 };
 
 document.addEventListener('keydown', e => {
diff --git a/packages/desktop-client/src/global-events.js b/packages/desktop-client/src/global-events.js
index 258e13ea2129eca227b4c23fe785b2c8db848043..1cc54f8766f1e30aabb86c5a5c9feff74787b833 100644
--- a/packages/desktop-client/src/global-events.js
+++ b/packages/desktop-client/src/global-events.js
@@ -14,6 +14,10 @@ export function handleGlobalEvents(actions, store) {
     // to update.
   });
 
+  global.Actual.setTheme = theme => {
+    actions.saveGlobalPrefs({ theme });
+  };
+
   listen('server-error', info => {
     actions.addGenericErrorNotification();
   });
diff --git a/packages/desktop-electron/preload.js b/packages/desktop-electron/preload.js
index c35fbf78d20fc1227af591c72675fb2449ba5a10..7bfb4a37c5b1e9738cffd7df15380d13f1a1563c 100644
--- a/packages/desktop-electron/preload.js
+++ b/packages/desktop-electron/preload.js
@@ -54,4 +54,6 @@ contextBridge.exposeInMainWorld('Actual', {
   getServerSocket: () => {
     return socketPromise;
   },
+
+  setTheme: () => {},
 });
diff --git a/upcoming-release-notes/1860.md b/upcoming-release-notes/1860.md
new file mode 100644
index 0000000000000000000000000000000000000000..980838e7428bf64ac83c8bcff77247e7ddd0ad43
--- /dev/null
+++ b/upcoming-release-notes/1860.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Added darkmode VRT (screenshot) tests