1.0.0 • Published 1 year ago
light-dark-toggle v1.0.0
LightDarkToggle
Dark mode using the browser
How to use?
import { LightDarkToggle } from 'light-dark-toggle';
LightDarkToggle.define();How does it work?
When the toggle renders in your HTML, using <light-dark-toggle> it renders a button with the current mode inside of it and a <meta> with the name color-scheme and the content set to the preferred color scheme of the user.
TODO
- Use a
<meta name="color-scheme">in the<head>as the source of truth if it exists. - Detect and handle multiple instances
- Accept a toggle in the light dom instead of overriding the
innerHTMLof thelight-dark-toggleelement. - Reflect preference in localstorage
- Tests?
- Performance?