Fix: chart scenes unreadable on dark themes - #488
Open
TROY665 wants to merge 2 commits into
Open
Conversation
…on card Chart scenes are unreadable on any dark theme. BarChart, LineChart, PieChart and KPIGrid all default `textColor` to #1F2937 (near-black), but Explainer only ever passed them `backgroundColor` - so on a dark theme every title, axis label, category label and value renders dark-on-dark. ComparisonCard has the mirror-image bug: it *does* receive the theme's `textColor`, but hardcodes `cardBackgroundColor = "#F3F4F6"`, painting light text onto a light card. Forward `textColor` to the four chart components, and give ComparisonCard `cut.cardBackgroundColor || theme.surfaceColor` so its surface follows the theme. Adds `cardBackgroundColor?: string` to the Cut interface for a per-cut override. Verified by re-rendering a 7-scene explainer on a dark theme: chart title, y-axis scale, category labels and per-bar values are all legible, and the comparison card labels now show on a themed surface.
Follows the existing source-assertion style in this file. Both tests fail
against the pre-fix Explainer and pass after it:
- charts must receive textColor={textColor}, or their labels render
dark-on-dark (the components default textColor to #1F2937)
- ComparisonCard must get a themed cardBackgroundColor, or its labels
render light-on-light (the component hardcodes #F3F4F6)
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
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: chart scenes unreadable on dark themes
Companion to #469 ("keep themed text legible on light playbooks"), which threads
theme colours into the text overlay components (
CaptionOverlay,SectionTitle,StatReveal,HeroTitle). This does the same for the chart components andComparisonCard, which #469 explicitly leaves untouched — same root cause(hardcoded colour defaults that
Explainer.tsxnever overrides), oppositedirection (near-black defaults invisible on dark themes, rather than near-white
defaults invisible on light ones).
Both touch
Explainer.tsxbut in different JSX blocks, so whichever lands secondshould rebase cleanly.
Problem
Explainer.tsxpassesbackgroundColor={bgColor}to the chart components butnever passes
textColor. All four chart components —BarChart,LineChart,PieChartandKPIGrid— defaulttextColorto"#1F2937"(near-black).On any dark theme the chart title, axis scale, category labels and value labels
are therefore drawn dark-on-dark and are invisible. The data renders correctly;
it simply cannot be seen. Bars, gridlines and series colours are unaffected,
which makes the failure look like "the labels aren't being passed" rather than a
colour bug.
ComparisonCardhas the mirror-image version of the same problem: it doesreceive
textColor, but hardcodescardBackgroundColor = "#F3F4F6". A darktheme's light text then lands on a light card. Same symptom, opposite cause.
Reproduction
Render any
explainer-datacomposition on the default dark theme with abar_chartorcomparisonscene:{ "type": "bar_chart", "title": "Neurons (millions)", "showValues": true, "chartData": [ { "label": "Octopus", "value": 500 }, { "label": "Dog", "value": 530 } ] }Before: bars and gridlines only — no title, no axis scale, no labels, no values.
After: all text visible.
Fix
textColor={textColor}toBarChart,LineChart,PieChartandKPIGrid.cardBackgroundColor={cut.cardBackgroundColor || theme.surfaceColor}toComparisonCardso the inner card follows the active theme.cardBackgroundColor?: stringto theCutinterface, so a scene can stillforce a light card on a dark theme when a design calls for it.
Six lines, one file. No behaviour change on light themes: the components already
default to the same near-black, so forwarding an explicitly light-theme
textColorproduces the identical result.Tests
Adds two contract tests to
tests/contracts/test_remotion_video_transition_contract.py,following the existing source-assertion style in that file:
test_chart_scenes_receive_the_theme_text_color— asserts each of the fourchart components receives
textColor={textColor}test_comparison_card_surface_follows_the_theme— asserts ComparisonCard getsa themed
cardBackgroundColorBoth fail against the pre-fix
Explainer.tsxand pass after it, verified bystashing the change and re-running.
Verification
Rendered a 7-scene explainer (
hero_title,text_card,stat_card,bar_chart,comparison,callout) on the default dark theme, before and after. Before, thebar chart showed bars and gridlines only and the comparison card's labels were
invisible. After, the chart shows its title, y-axis scale (0–530), category
labels and per-bar values, and the comparison card shows both labels on a themed
surface. The other five scenes are pixel-identical.
npx tsc --noEmitpasses.