Light and dark

By default

By default, a chart uses the text colour of the page. If the text is light in dark mode, the bars are light too. You do not need to set anything.

A colour you set

A colour you set is used in light mode and in dark mode. That is fine if the colour can be read on both, such as a medium orange. If you do not use dark mode, you can stop here.

Two colours

If a colour does not work on both, give it two values with light-dark(): the first for light mode, the second for dark mode. Every colour you set needs two values.

.granny {
	--tablechart-bar-color: light-dark(#7fb03f, #a5d46a);
	--tablechart-value-color: light-dark(#5d8a2b, #c3e59a);
}

The two values can be any colour: a hex value, a named CSS colour or a variable. If your site already has variables for its colours, use those.

:root {
	--brand-green: #7fb03f;
	--brand-green-light: #a5d46a;
}
.granny {
	--tablechart-bar-color: light-dark(var(--brand-green), var(--brand-green-light));
}
.elstar {
	--tablechart-bar-color: light-dark(seagreen, palegreen);
}

light-dark() only works if the page says it has a light and a dark mode, with color-scheme. To follow the setting of the system, set it on :root:

:root {
	color-scheme: light dark;
}

If your site has its own dark theme, set color-scheme: dark on the class of that theme.

Try it

The buttons in the example set color-scheme on this example only. The Granny Johnson column and its number have two colours each. The other columns use one colour.

.scheme-example .demo {
	background: light-dark(#f7f2f5, #1d2b33);
	color: light-dark(#16323f, #e9eef1);
	--tablechart-surface: light-dark(#f7f2f5, #1d2b33);
}
.scheme-example .granny {
	--tablechart-bar-color: light-dark(#7fb03f, #a5d46a);
	--tablechart-value-color: light-dark(#5d8a2b, #c3e59a);
}
.scheme-example .tablechart-value.granny {
	font-family: "Roboto Slab", Rockwell, serif;
	font-weight: 400;
	font-size: 2.2em;
}

<figure data-chart="column">
	<figcaption><b>Apples sold by variety</b><br><span>thousands</span></figcaption>
	<table>
		<tbody>
			<tr><th>Elstar</th><td>128</td></tr>
			<tr class="granny"><th>Granny Johnson</th><td>45</td></tr>
			<tr><th>Jonagold</th><td>135</td></tr>
			<tr><th>Braeburn</th><td>121</td></tr>
		</tbody>
	</table>
</figure>

The long way

Without light-dark(), set the variable again for dark mode. This follows the setting of the system only.

.granny {
	--tablechart-bar-color: #7fb03f;
}
@media (prefers-color-scheme: dark) {
	.granny {
		--tablechart-bar-color: #a5d46a;
	}
}

Numbers inside bars

The number inside a bar is dark or light, whichever reads on the colour of the bar. You do not need to set it for light and dark mode. To set it yourself, use --tablechart-bar-value-color, --tablechart-up-value-color, --tablechart-down-value-color or --tablechart-total-value-color.

Background

The background colour of a chart, --tablechart-surface, is the background the browser uses for the page: white in light mode and dark in dark mode. Lighter lines and slices are mixed with it. If your page has another background, set --tablechart-surface with two values as well. See Background.