Skip to content

fix: vlt bar color invisible in dark mode#45

Merged
lukekarrys merged 1 commit intomainfrom
fix/vlt-dark-mode-bar-color
Feb 28, 2026
Merged

fix: vlt bar color invisible in dark mode#45
lukekarrys merged 1 commit intomainfrom
fix/vlt-dark-mode-bar-color

Conversation

@vltbaudbot
Copy link
Contributor

Problem

The vlt bar in the bar charts uses black (#000000) as its brand color, which is invisible on dark backgrounds when dark mode is active. This also affected the legend dots, tooltips, and DNF (did not finish) striped patterns for vlt.

Additionally, the component was comparing against theme (which can be "system") instead of resolvedTheme (which resolves to the actual "dark" or "light" preference), meaning users with system-level dark mode preferences wouldn't see the fix.

Fix

  • Added getColor() helper that resolves vlt's display color to white in dark mode, used consistently across all chart elements:
    • Bar fills and Cell fills (consolidated chart)
    • Individual per-fixture charts
    • Legend dot colors (chartConfig and individualChartConfig)
    • DNF striped patterns (base color + lightened color)
    • DNF fallback fills in consolidated data
  • Replaced all theme === "dark"resolvedTheme === "dark" (6 occurrences) for axis ticks, labels, and legend wrapper styling so system dark mode is correctly detected
  • Updated useMemo dependency arrays to include resolvedTheme where getColor is used, ensuring proper re-rendering on theme changes

Testing

  • TypeScript compiles cleanly (tsc -b --noEmit)
  • ESLint passes with no warnings

The vlt bar in bar charts used black (#000000) which was invisible on
dark backgrounds. Fixed by:

- Adding getColor() helper that resolves vlt's display color to white
  in dark mode across all chart elements (bars, cells, legend dots,
  tooltips, DNF patterns)
- Replacing all 'theme === "dark"' comparisons with
  'resolvedTheme === "dark"' so system dark mode preference is
  correctly detected (theme can be 'system', resolvedTheme is always
  'dark' or 'light')

Co-authored-by: Luke Karrys <luke@lukekarrys.com>
@vltbaudbot vltbaudbot force-pushed the fix/vlt-dark-mode-bar-color branch from fd5baa1 to 1835b62 Compare February 28, 2026 00:57
@lukekarrys lukekarrys merged commit df0cfe4 into main Feb 28, 2026
43 checks passed
@lukekarrys lukekarrys deleted the fix/vlt-dark-mode-bar-color branch February 28, 2026 01:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants