Theme Controller

A presentational wrapper for CSS-based radio theme switching. Provides a styled container for theme selection controls using the DuskMoon theme system.

Installation

npm install @duskmoon-dev/el-theme-controller

Usage

import { register } from '@duskmoon-dev/el-theme-controller';
register();

<el-dm-theme-controller>
  <label>
    <input type="radio" name="theme" value="sunshine" />
    Light
  </label>
  <label>
    <input type="radio" name="theme" value="moonlight" />
    Dark
  </label>
</el-dm-theme-controller>

Live Demo

Theme Controller

Sunshine

Moonlight

Auto

Slots

Slot	Description
Default	Theme selection controls (radio buttons, toggles, etc.)

Theme Integration

The theme controller works with the DuskMoon theme system. Themes are applied by setting the data-theme attribute on the <html> element:

// Apply theme manually
document.documentElement.setAttribute('data-theme', 'moonlight');

// Remove for auto (system preference)
document.documentElement.removeAttribute('data-theme');

See the Theming guide for details on available themes.