@ryanhelsing/ry-ui
Version:
Framework-agnostic, Light DOM web components. CSS is the source of truth.
37 lines (27 loc) • 869 B
Markdown
Cycles through themes on click. Sets `data-ry-theme` on `<html>`.
| Attribute | Values | Description |
|-----------|--------|-------------|
| `themes` | string | Comma-separated theme names (default: "light,dark") |
Events: `ry:theme-change` — `e.detail.theme`
API: `.theme` (get/set), `.toggle()`
```html
<ry-theme-toggle themes="light,dark"></ry-theme-toggle>
<ry-theme-toggle themes="light,dark,ocean"></ry-theme-toggle>
```
JS:
```js
const toggle = document.querySelector('ry-theme-toggle');
toggle.addEventListener('ry:theme-change', (e) => {
console.log(e.detail.theme); // "dark"
});
// Programmatic
toggle.theme; // "light"
toggle.theme = 'dark';
toggle.toggle(); // cycles to next
```
Or skip the component and set the theme directly:
```js
document.documentElement.dataset.ryTheme = 'dark';
```