Skip to content

fix: vlt bar color invisible in dark mode #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukekarrys merged 1 commit into from
Feb 28, 2026
Merged

fix: vlt bar color invisible in dark mode #45

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions app/src/components/variation/chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,11 @@ export const VariationChart = ({
const showVersions = !isRegistry;
const patternIdPrefix = useId().replace(/:/g, "");

// Resolve display color for a package manager — vlt uses white in dark mode
// since its brand color (#000000) is invisible on dark backgrounds
const getColor = (pm: PackageManager) =>
pm === "vlt" && resolvedTheme === "dark" ? "white" : colors[pm];

const getDnfPatternId = (scope: string, pm: PackageManager) =>
`dnf-${patternIdPrefix}-${scope}-${pm}`;

Expand All @@ -118,7 +123,7 @@ export const VariationChart = ({
const renderDnfPatterns = (scope: string) => (
<defs>
{filteredPackageManagers.map((pm) => {
const baseColor = colors[pm];
const baseColor = getColor(pm);
const lightColor = lightenColor(baseColor);
return (
<pattern
Expand Down Expand Up @@ -162,11 +167,11 @@ export const VariationChart = ({
showVersions ? chartData.versions : undefined,
{ isRegistryVariation: isRegistry },
),
color: colors[pm],
color: getColor(pm),
};
});
return config;
}, [filteredPackageManagers, colors, chartData.versions, showVersions, isRegistry]);
}, [filteredPackageManagers, colors, chartData.versions, showVersions, isRegistry, resolvedTheme]);

const individualChartConfig = useMemo(() => {
const config: ChartConfig = {};
Expand All @@ -178,11 +183,11 @@ export const VariationChart = ({
);
config[labelWithVersion] = {
label: labelWithVersion,
color: colors[pm],
color: getColor(pm),
};
});
return config;
}, [filteredPackageManagers, colors, chartData.versions, showVersions, isRegistry]);
}, [filteredPackageManagers, colors, chartData.versions, showVersions, isRegistry, resolvedTheme]);

const yAxisLabel = isTaskExecutionVariation(currentVariation)
? "Time (seconds)"
Expand Down Expand Up @@ -299,7 +304,7 @@ export const VariationChart = ({
if (isDnf) {
chartItem[dnfKey] = true;
if (typeof chartItem[fillKey] !== "string") {
chartItem[fillKey] = colors[pm];
chartItem[fillKey] = getColor(pm);
}
}
});
Expand All @@ -311,6 +316,7 @@ export const VariationChart = ({
fixtureSlowestValues,
variationActivePackageManagers,
colors,
resolvedTheme,
]);

const normalizeTickLabel = (label: string) => {
Expand Down Expand Up @@ -415,7 +421,7 @@ export const VariationChart = ({
dataKey="fixture"
tick={{
fontSize: 12,
fill: theme === "dark" ? "white" : "currentColor",
fill: resolvedTheme === "dark" ? "white" : "currentColor",
}}
/>
<YAxis
Expand All @@ -425,15 +431,15 @@ export const VariationChart = ({
position: "outside",
style: {
textAnchor: "middle",
fill: theme === "dark" ? "white" : "currentColor",
fill: resolvedTheme === "dark" ? "white" : "currentColor",
},
offset: -10,
}}
tickCount={CHART_DEFAULTS.TICK_COUNT}
tick={{
fontFamily: "var(--font-mono)",
fontSize: 12,
fill: theme === "dark" ? "white" : "currentColor",
fill: resolvedTheme === "dark" ? "white" : "currentColor",
}}
width={80}
{...yAxisProps}
Expand All @@ -446,7 +452,7 @@ export const VariationChart = ({
verticalAlign="bottom"
height={100}
wrapperStyle={{
color: theme === "dark" ? "white" : "currentColor",
color: resolvedTheme === "dark" ? "white" : "currentColor",
}}
content={(props) => {
if (!props.payload) return null;
Expand Down Expand Up @@ -488,7 +494,7 @@ export const VariationChart = ({
<Bar
key={pm}
dataKey={pm}
fill={pm === "vlt" && theme === "dark" ? "white" : colors[pm]}
fill={getColor(pm)}
name={formatPackageManagerLabel(
pm,
showVersions ? chartData.versions : undefined,
Expand All @@ -499,13 +505,11 @@ export const VariationChart = ({
{consolidatedData.map((entry, index) => {
const dnfKey = `${pm}_dnf`;
const isDnf = entry[dnfKey] === true;
const fillColor =
pm === "vlt" && theme === "dark" ? "white" : colors[pm];
return (
<Cell
key={`${pm}-${entry.fixture}-${index}`}
fill={
isDnf ? getDnfPatternFill("total", pm) : fillColor
isDnf ? getDnfPatternFill("total", pm) : getColor(pm)
}
/>
);
Expand Down Expand Up @@ -555,8 +559,7 @@ export const VariationChart = ({
return null;
}

const fillColor =
pm === "vlt" && resolvedTheme === "dark" ? "white" : colors[pm];
const fillColor = getColor(pm);

return {
name: formatPackageManagerLabel(
Expand All @@ -567,7 +570,7 @@ export const VariationChart = ({
value: resolvedValue,
fill: isDnf ? getDnfPatternFill(fixtureId, pm) : fillColor,
dnf: isDnf,
dnfColor: colors[pm],
dnfColor: getColor(pm),
};
})
.filter(Boolean);
Expand Down Expand Up @@ -622,15 +625,15 @@ export const VariationChart = ({
position: "outside",
style: {
textAnchor: "middle",
fill: theme === "dark" ? "white" : "currentColor",
fill: resolvedTheme === "dark" ? "white" : "currentColor",
},
offset: -10,
}}
tickCount={CHART_DEFAULTS.TICK_COUNT}
tick={{
fontFamily: "var(--font-mono)",
fontSize: 12,
fill: theme === "dark" ? "white" : "currentColor",
fill: resolvedTheme === "dark" ? "white" : "currentColor",
}}
width={80}
{...yAxisProps}
Expand Down
Loading