# Theme Toggle ## `` Cycles through themes on click. Sets `data-ry-theme` on ``. | 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 ``` 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'; ```