Theme that follows the CSS color-scheme of the page.

It has the colors of lightTheme and darkTheme: every color that differs between the two is a CSS light-dark() value, such as light-dark(#2373e6, #5396ff). The browser picks the light or dark color from the color-scheme of the element it is applied to. Switching between light and dark needs no React state and no re-render, and server-rendered pages show the right colors from the first paint.

• To follow the operating system, set :root { color-scheme: light dark; }.
• To follow your own toggle, set color-scheme: light or color-scheme: dark on <html> or on any wrapper. If your toggle only sets a class, add one CSS rule, for example .dark { color-scheme: dark; }.
• Without any color-scheme, browsers use the light colors.

Like the other built-in themes, it does not paint the page background. Pair it with a page whose background follows the same color-scheme.

Exported SVG and PNG images keep the colors of the color scheme that was active when they were taken.

light-dark() needs Chrome 123, Firefox 120, or Safari 17.5. Older browsers do not understand the value and ignore it: shapes fall back to the SVG defaults, which are a black fill and no stroke, and Tooltip and Legend lose their theme colors. If you support older browsers, use lightTheme and darkTheme instead, or a theme with CSS var() values.

Available since Recharts 3.11