A Recharts chart can follow your page's dark mode with no theme state and no re-render: it names CSS variables, and the page declares them. This article shows the container that declares them, the trap that catches the hand-written version, and what still needs a line of your own.

The examples here are screenshots; they run live in the original article .

The problem

A chart library takes its colours as strings — stroke="#0ea5e9" — so nothing your page does to its own theme reaches the chart. Your cards turn dark and the chart keeps its light-mode lines, black axis labels and a white tooltip. The fixes land one bug at a time: axis labels in one project, tooltips in another, labels, series and tooltips in a third, all in the last three months. Recharts itself discussed a theming API through most of 2026 and is shipping one in its 3.11 pre-releases, marked experimental.

The usual fixes each cost something:

Pick the colour in React : stroke={theme === 'dark' ? '#38bdf8' : '#0ea5e9'} .…