Keep custom theme active after reload (#32506)

* fix: keep custom theme active after reload

* test: add e2e test

* test: fix matrix chat test

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -36,6 +36,9 @@ class Helpers {
         name: "Custom theme",
         isDark: false,
         colors: {},
+        compound: {
+            "--cpd-color-bg-canvas-default": "tomato",
+        },
     };
 
     constructor(
@@ -50,6 +53,13 @@ class Helpers {
         return this.app.settings.openUserSettings("Appearance");
     }
 
+    /**
+     * Close the appearance tab
+     */
+    closeAppearanceTab() {
+        return this.app.settings.closeDialog();
+    }
+
     /**
      * Compare screenshot and hide the matrix chat
      * @param locator

playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -88,6 +88,27 @@ test.describe("Appearance user settings tab", () => {
                     await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
                 },
             );
+
+            test(
+                "should keep custom theme when reloading the page",
+                { tag: "@screenshot" },
+                async ({ page, app, user, util }) => {
+                    await util.addCustomTheme();
+                    await util.getCustomTheme().click();
+                    await util.closeAppearanceTab();
+
+                    await expect(page).toMatchScreenshot("window-custom-theme.png");
+
+                    await page.reload();
+
+                    await util.openAppearanceTab();
+                    // Assert that the custom theme is still selected after reloading the page
+                    await expect(util.getCustomTheme()).toBeChecked();
+
+                    await util.closeAppearanceTab();
+                    await expect(page).toMatchScreenshot("window-custom-theme.png");
+                },
+            );
         });
     });
 });

src/components/structures/MatrixChat.tsx

@@ -1648,6 +1648,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 return;
             }
 
+            // Re-apply theme now that account data (including custom_themes) is loaded, otherwise we might end up with the wrong theme applied if the user has custom themes enabled
+            setTheme();
+
             this.firstSyncComplete = true;
             this.firstSyncPromise.resolve();
 

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -78,6 +78,7 @@ jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
 // Stub out ThemeWatcher as the necessary bits for themes are done in element-web's index.html and thus are lacking here,
 // plus JSDOM's implementation of CSSStyleDeclaration has a bunch of differences to real browsers which cause issues.
 jest.mock("../../../../src/settings/watchers/ThemeWatcher");
+jest.mock("../../../../src/theme");
 
 /** The matrix versions our mock server claims to support */
 const SERVER_SUPPORTED_MATRIX_VERSIONS = ["v1.1", "v1.5", "v1.6", "v1.8", "v1.9"];