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");
+                },
+            );
         });
     });
 });