Color Scheme
Light / dark / system colour-scheme switch for lit-material: a toggle, a persisted setter, and a no-flash boot snippet.
- 4.2 KB gzipped
- @lit-material/color-scheme 0.1.3
- Renders on the server
Example
Color Scheme
A light/dark switch that sets color-scheme on <html>, remembers the choice and keeps every
toggle in sync. The one in this site's header is the cycle variant.
Toggle (light ↔ dark)
Cycle (light → dark → system)
Install
npm install @lit-material/color-scheme @lit-material/tokensimport "@lit-material/color-scheme";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-color-scheme-toggle>
A button that switches the page between light and dark, built on
lit-material-icon-button. It sets the color-scheme attribute on
<html> (which @lit-material/tokens reads), remembers the choice in
localStorage, and keeps every toggle on the page in sync.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
cycle | cycle | boolean | false | Step light → dark → system instead of toggling light ↔ dark. |
storageKey | storage-key | none | DEFAULT_STORAGE_KEY | localStorage key for the choice. |
Events
| Event | Description |
|---|---|
change | After the visitor picks a scheme; detail.scheme is light, dark or auto. |
Slots
| Slot | Description |
|---|---|
light-icon | Icon shown while light (default: a sun). |
dark-icon | Icon shown while dark (default: a moon). |
auto-icon | Icon shown while following the system, with cycle (default: a half-filled circle). |