From f9b0a88a4ec23447a2c44d65b4dcb738c6f36665 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 13 Apr 2026 17:19:40 +0300 Subject: [PATCH] fix(options/appearance): theme defined not previewed correctly --- .../src/widgets/type_widgets/options/appearance.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx index 027667de56..04f5477837 100644 --- a/apps/client/src/widgets/type_widgets/options/appearance.tsx +++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx @@ -361,11 +361,19 @@ function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabl .find(item => item.value === fontFamily); const displayLabel = currentFont?.label ?? currentFont?.value ?? fontFamily ?? ""; + // Map option name to CSS variable + const themeCssVariable = { + mainFontFamily: "var(--main-font-family)", + treeFontFamily: "var(--tree-font-family)", + detailFontFamily: "var(--detail-font-family)", + monospaceFontFamily: "var(--monospace-font-family)" + }[fontFamilyOption] ?? "inherit"; + // Get the CSS font-family value for preview const getFontFamily = (value: string) => { if (value === "theme") { - // Use inherited font from the current theme - return "inherit"; + // Use the theme's CSS variable for this font option + return themeCssVariable; } if (value === "system") { // Use the appropriate system font stack