Skip to main content

Dark Mode

With the help of CSS variables, you can easily customize the theme of the components to support dark mode.

You can override color-related CSS variables under the @media (prefers-color-scheme: dark) media query to support dark mode like below:


Rules about dark mode must be imported / declared AFTER the default CSS file.

@media (prefers-color-scheme: dark) {
:root {
--wkit-accent-hs: 166, 91%;
--wkit-on-accent-rgb: 255, 255, 255;
--wkit-bg-rgb: 40, 40, 40;
--wkit-on-bg-rgb: 241, 241, 241;