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
index 2e18a7006d..4f3a11ef16 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-creates-a-transaction-from-accounts-id-page-2-chromium-linux.png 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/playwright.config.js b/packages/desktop-client/playwright.config.js
index fbb415beb0..ad5b4896c5 100644
--- a/packages/desktop-client/playwright.config.js
+++ b/packages/desktop-client/playwright.config.js
@@ -17,8 +17,17 @@ expect.extend({
       maxDiffPixels: 5,
     };
 
+    // Get the data-theme attribute from page.
+    // If there is a page() function, it means that the locator
+    // is not a page object but a locator object.
+    const dataThemeLocator =
+      typeof locator.page === 'function'
+        ? locator.page().locator('[data-theme]')
+        : locator.locator('[data-theme]');
+
     // Check lightmode
     await locator.evaluate(() => window.Actual.setTheme('auto'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'auto');
     const lightmode = await expect(locator).toHaveScreenshot(config);
 
     if (lightmode && !lightmode.pass) {
@@ -27,6 +36,7 @@ expect.extend({
 
     // Switch to darkmode and check
     await locator.evaluate(() => window.Actual.setTheme('dark'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'dark');
     const darkmode = await expect(locator).toHaveScreenshot(config);
 
     // Assert on
@@ -36,6 +46,7 @@ expect.extend({
 
     // Switch to midnight theme and check
     await locator.evaluate(() => window.Actual.setTheme('midnight'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'midnight');
     const midnightMode = await expect(locator).toHaveScreenshot(config);
 
     // Assert on
diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
index 8abf9bb140..f7785d58df 100644
--- a/packages/desktop-client/src/components/App.tsx
+++ b/packages/desktop-client/src/components/App.tsx
@@ -29,7 +29,7 @@ import {
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
-import { styles, hasHiddenScrollbars, ThemeStyle } from '../style';
+import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
 import { AppBackground } from './AppBackground';
@@ -155,6 +155,8 @@ export function App() {
     };
   }, [dispatch]);
 
+  const [theme] = useTheme();
+
   return (
     <BrowserRouter>
       <ExposeNavigate />
@@ -166,6 +168,7 @@ export function App() {
                 <DndProvider backend={HTML5Backend}>
                   <ScrollProvider>
                     <View
+                      data-theme={theme}
                       style={{
                         height: '100%',
                         display: 'flex',
diff --git a/upcoming-release-notes/3523.md b/upcoming-release-notes/3523.md
new file mode 100644
index 0000000000..5dc8ddbaf3
--- /dev/null
+++ b/upcoming-release-notes/3523.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+e2e stability: wait for data-theme to switch before taking a screenshot