Fix bundled font or custom font not applied after theme switch (#31591)

* refactor: transform `FontWater.onAction` to switch

* fix: reload font after switching theme

Fix #26248 #31588

When a theme is swiched, `clearCustomTheme` remove all css variables.
After the styles are re-applied but the custom fonts or emoji are not
re-applied.

* test: add test for `Action.ReloadFont`

* test: add missing tests for existing actions

* test(e2e): add tests to ensure that font and emoji stay unchanged

* Revert "fix: reload font after switching theme"

This reverts commit 2b0071af21c38bf2c86780356aa39d290e9d9148.

* Revert "refactor: transform `FontWater.onAction` to switch"

This reverts commit 411915860923230cabce3ad5498fb46696a9a65e.

* Revert "test: add test for `Action.ReloadFont`"

This reverts commit 31b3b224cd2c443663a2b9bba312a4140907a8ed.

* fix: don't remove custom emoji and cpd font when clearing custom theme

Fix #26248 #31588

When a theme is swiched, `clearCustomTheme` remove all css variables.
After the styles are re-applied but the custom fonts or emoji are not
re-applied.
This fix avoid the custom font and emoji to be removed.

* test: add tests

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

@@ -56,4 +56,35 @@ test.describe("Appearance user settings tab", () => {
         // Assert that the font-family value was removed
         await expect(page.locator("body")).toHaveCSS("font-family", '""');
     });
+
+    test(
+        "should keep same font and emoji when switching theme",
+        { tag: "@screenshot" },
+        async ({ page, app, user, util }) => {
+            const roomId = await util.createAndDisplayRoom();
+            await app.client.sendMessage(roomId, { body: "Message with 🦡", msgtype: "m.text" });
+
+            await app.settings.openUserSettings("Appearance");
+            const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
+            await tab.getByRole("button", { name: "Show advanced" }).click();
+            await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
+            await tab.getByRole("switch", { name: "Use a system font" }).click();
+
+            await app.closeDialog();
+            await expect(page).toMatchScreenshot("window-before-switch.png", {
+                mask: [page.locator(".mx_MessageTimestamp")],
+            });
+
+            // Switch to dark theme
+            await app.settings.openUserSettings("Appearance");
+            await util.getMatchSystemThemeSwitch().click();
+            await util.getDarkTheme().click();
+
+            await app.closeDialog();
+            // Font and emoji should remain the same after theme switch
+            await expect(page).toMatchScreenshot("window-after-switch.png", {
+                mask: [page.locator(".mx_MessageTimestamp")],
+            });
+        },
+    );
 });

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

@@ -150,9 +150,10 @@ class Helpers {
     /**
      * Create and display a room named Test Room
      */
-    async createAndDisplayRoom() {
-        await this.app.client.createRoom({ name: "Test Room" });
+    async createAndDisplayRoom(): Promise<string> {
+        const roomId = await this.app.client.createRoom({ name: "Test Room" });
         await this.app.viewRoomByName("Test Room");
+        return roomId;
     }
 
     /**