@implementjs/mode-watcher
v0.0.11
Published
Dark mode for implement, applied before the first paint: the visitor's choice, the system preference and the class on <html>.
Maintainers
iedan.Readme
@implementjs/mode-watcher
Dark mode for implement: the visitor's choice, the system
preference, and the class on <html>. It is applied before the first paint, so the page
never flashes the wrong theme.
npm install @implementjs/mode-watcherimport { App, Button } from "@implementjs/core";
import { createModeManager, ModeWatcher } from "@implementjs/mode-watcher";
export const mode = createModeManager();
App({ target: document.body }).render(
ModeWatcher({ manager: mode }),
Button({ onClick: () => mode.toggleMode() }, "Toggle theme"),
);ModeWatcher renders nothing. It reads the stored choice, falls back to the system
preference, and keeps the dark class and color-scheme on the document element in step
with the manager.
A port of mode-watcher for implement.
Full documentation: implementjs.dev/mode-watcher