fix: support dark mode with custom/legacy themes#9093
Open
fix: support dark mode with custom/legacy themes#9093
Conversation
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 <ericokuma@users.noreply.github.com>
Contributor
Author
Seems to be working now for me :)
|
Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix: Dark Mode not working with Custom Themes (ENG-1067)
Custom themes using the legacy format (
primaryColorRaw/secondaryColorRaw) or themes that only definelightcolors without explicitdarkcolors were broken in dark mode.Root Cause
Three places in the theme system explicitly excluded legacy theme colors from dark mode:
theme.tsprocessTheme()— Returned empty dark colors{}for legacy themes. WhengenerateCSS()processed these, it emitted--var: unset;for every theme variable in the.dark .dashboard-theme-boundaryblock, which actively removed the custom theme colors in dark mode.theme-manager.tsresolveThemeColors()— Only fell back toprimaryColorRaw/secondaryColorRawwhen!isThemeModeDark, so charts in dark mode received default colors instead of the custom theme colors.theme-manager.tsresolveThemeObject()— ThehasLegacyColorsguard required!isThemeModeDark, so dark mode returnedundefinedand canvas chart components got no theme object.Fix
processColors(legacyColors, true), which appliescreateDarkVariation()for perceptually appropriate dark mode colors.resolveThemeColors()to fall back to legacy color fields in both light and dark modes.resolveThemeObject()to recognize legacy colors in both modes.Files Changed
web-common/src/features/themes/theme.tsweb-common/src/features/themes/theme-manager.tsChecklist:
Closes ENG-1067
Linear Issue: ENG-1067