From c682284b2e818bf1ed71f8cb446aa1c4e4dd51e3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 20 Mar 2026 20:51:25 +0000 Subject: [PATCH 1/2] fix: support dark mode with custom/legacy themes When custom themes use the legacy format (primaryColorRaw/secondaryColorRaw) or only define light colors without explicit dark colors, dark mode was broken because: 1. theme.ts processTheme() returned empty dark colors ({}) for legacy themes, causing generateCSS() to emit '--var: unset' which removed theme variables in dark mode. 2. theme-manager.ts resolveThemeColors() only fell back to legacy color fields in light mode, returning default colors in dark mode. 3. theme-manager.ts resolveThemeObject() only recognized legacy colors in light mode, returning undefined for dark mode. Fixes: - Generate dark palette from legacy colors using processColors(legacyColors, true) which applies createDarkVariation() for proper dark mode colors. - Allow resolveThemeColors() to fall back to legacy color fields in both modes. - Allow resolveThemeObject() to recognize legacy colors in both modes. Resolves ENG-1067 Co-authored-by: ericokuma --- web-common/src/features/themes/theme-manager.ts | 12 +++--------- web-common/src/features/themes/theme.ts | 5 +++-- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/web-common/src/features/themes/theme-manager.ts b/web-common/src/features/themes/theme-manager.ts index 9bf5341afcb..2b07147afa1 100644 --- a/web-common/src/features/themes/theme-manager.ts +++ b/web-common/src/features/themes/theme-manager.ts @@ -137,14 +137,11 @@ class ThemeManager { : themeSpec.light; // Handle legacy theme format (colors: primary/secondary) - // Fall back to legacy color fields only in light mode - // TODO: ENG-957 + // Fall back to legacy color fields in both light and dark modes const primaryColor = - modeTheme?.primary || - (!isThemeModeDark ? themeSpec.primaryColorRaw : undefined); + modeTheme?.primary || themeSpec.primaryColorRaw; const secondaryColor = - modeTheme?.secondary || - (!isThemeModeDark ? themeSpec.secondaryColorRaw : undefined); + modeTheme?.secondary || themeSpec.secondaryColorRaw; return { primary: primaryColor ? getChroma(primaryColor) : primary[`500`], @@ -164,10 +161,7 @@ class ThemeManager { // Handle legacy theme format (colors: primary/secondary) // If neither light nor dark is defined, create a theme object from legacy fields - // but only for light mode - // TODO: ENG-957 const hasLegacyColors = - !isThemeModeDark && !themeSpec.light && !themeSpec.dark && (themeSpec.primaryColorRaw || themeSpec.secondaryColorRaw); diff --git a/web-common/src/features/themes/theme.ts b/web-common/src/features/themes/theme.ts index 2bf65af483e..20f8424673f 100644 --- a/web-common/src/features/themes/theme.ts +++ b/web-common/src/features/themes/theme.ts @@ -108,7 +108,7 @@ export class Theme { private processTheme(spec: V1ThemeSpec) { // Handle legacy theme format (colors: primary/secondary) // If neither light nor dark is defined, but we have legacy color fields, - // treat them as light mode colors only for backwards compatibility + // generate both light and dark palettes from them const hasLegacyColors = !spec.light && !spec.dark && @@ -120,7 +120,8 @@ export class Theme { secondary: spec.secondaryColorRaw, }; const lightColors = this.processColors(legacyColors); - return { dark: {}, light: lightColors }; + const darkColors = this.processColors(legacyColors, true); + return { dark: darkColors, light: lightColors }; } const darkColors = this.processColors(spec.dark ?? {}, true); From 7fc402ecef930cf159dea35ff0f424ff6cfa4f7f Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 21 Mar 2026 06:41:06 +0000 Subject: [PATCH 2/2] style: fix prettier formatting in theme-manager.ts Co-authored-by: ericokuma --- web-common/src/features/themes/theme-manager.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web-common/src/features/themes/theme-manager.ts b/web-common/src/features/themes/theme-manager.ts index 2b07147afa1..233d9f19cd4 100644 --- a/web-common/src/features/themes/theme-manager.ts +++ b/web-common/src/features/themes/theme-manager.ts @@ -138,10 +138,8 @@ class ThemeManager { // Handle legacy theme format (colors: primary/secondary) // Fall back to legacy color fields in both light and dark modes - const primaryColor = - modeTheme?.primary || themeSpec.primaryColorRaw; - const secondaryColor = - modeTheme?.secondary || themeSpec.secondaryColorRaw; + const primaryColor = modeTheme?.primary || themeSpec.primaryColorRaw; + const secondaryColor = modeTheme?.secondary || themeSpec.secondaryColorRaw; return { primary: primaryColor ? getChroma(primaryColor) : primary[`500`],