zen-dark-mode v3.1.0

0.5Kb gzipped Dark Mode for web applications

Import

import { ZenDarkMode } from 'zen-dark-mode'

new ZenDarkMode({
    defaultTheme: 'dark',
    customButton: false
})

Button

<button data-theme-picker>theme</button>

Or use a button from the package. You must enable the customButton: true option. Example.

Flash of default theme

Retrieve the theme from localStorage in a tiny additional script in the head, right after the stylesheet is loaded. This to execute as early as possible to avoid a "flash of default theme".

document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'dark')

theme-color meta tag

Add theme-color in the head.

<meta name="theme-color" content="">

CSS

Specify the color that user agents should use to customize the display of the page or of the surrounding user interface.

:root {
    --theme-color-dark: hsl(0 0% 0%);
    --theme-color-light: hsl(0 0% 100%);
}

License

zen-dark-mode is released under MIT license.