Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Florian Duros
2026-01-05 17:14:08 +01:00
committed by GitHub
parent 4bd1d4144f
commit be7be39d0f
7 changed files with 113 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/theme.ts
View File

@@ -26,6 +26,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "./languageHandler";
import SettingsStore from "./settings/SettingsStore";
import ThemeWatcher from "./settings/watchers/ThemeWatcher";
import { FontWatcher } from "./settings/watchers/FontWatcher";
export const DEFAULT_THEME = "light";
const HIGH_CONTRAST_THEMES: Record<string, string> = {
@@ -126,10 +127,15 @@ export function getOrderedThemes(): ITheme[] {
}
function clearCustomTheme(): void {
// remove all css variables, we assume these are there because of the custom theme
// remove all css variables (except font and emoji variables), we assume these are there because of the custom theme
const inlineStyleProps = Object.values(document.body.style);
for (const prop of inlineStyleProps) {
if (typeof prop === "string" && prop.startsWith("--")) {
if (
typeof prop === "string" &&
prop.startsWith("--") &&
prop !== FontWatcher.FONT_FAMILY_CUSTOM_PROPERTY &&
prop !== FontWatcher.EMOJI_FONT_FAMILY_CUSTOM_PROPERTY
) {
document.body.style.removeProperty(prop);
}
}