Skip to main content

theme

Toggle between light and dark mode

theme: 'light' | 'dark',

Default: light

Usage​

const cal = new CalHeatmap();
cal.paint({ theme: 'light' });
note

Theme is a togglable option, and not honoring the CSS prefers-color-scheme media query, as not all websites support dark/light mode.

info

All examples and demos in this documentation uses CSS to switch between light and dark mode, instead of the theme option, due to the way the documentation engine works.

Customize​

All dark theme properties can be customized via CSS, use the [data-theme='dark'] prefix