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.

src/dispatcher/actions.ts

@@ -120,6 +120,11 @@ export enum Action {
      */
     UpdateSystemFont = "update_system_font",
 
+    /**
+     * Reloads the font settings from the SettingsStore.
+     */
+    ReloadFont = "reload_font",
+
     /**
      * Changes room based on payload parameters. Should be used with ViewRoomPayload.
      */

src/settings/watchers/FontWatcher.ts

@@ -176,8 +176,9 @@ export class FontWatcher implements IWatcher {
                     font: "",
                 });
                 break;
+            // Font size can be saved on the account, so grab value when logging in
             case Action.OnLoggedIn:
-                // Font size can be saved on the account, so grab value when logging in
+            case Action.ReloadFont:
                 this.updateFont();
                 break;
         }

src/theme.ts

@@ -26,6 +26,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { _t } from "./languageHandler";
 import SettingsStore from "./settings/SettingsStore";
 import ThemeWatcher from "./settings/watchers/ThemeWatcher";
+import defaultDispatcher from "./dispatcher/dispatcher";
+import { Action } from "./dispatcher/actions";
 
 export const DEFAULT_THEME = "light";
 const HIGH_CONTRAST_THEMES: Record<string, string> = {
@@ -381,6 +383,11 @@ export async function setTheme(theme?: string): Promise<void> {
                 const metaElement = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]')!;
                 metaElement.content = bodyStyles.backgroundColor;
             }
+
+            // clearCustomTheme removed all css variables, so we need to
+            // re-set the system font variables after a theme change
+            defaultDispatcher.dispatch({ action: Action.ReloadFont });
+
             resolve();
         };