Theme Controller

Theme Controller allows users to switch between DaisyUI themes. Supports toggle, dropdown, and radio button styles.

const { default: ThemeController } = await import('/components/actions/theme-controller.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const isDark = signal(document.documentElement.getAttribute('data-theme') === 'dark');

const demo = div({ class: 'flex items-center gap-4' },
    ThemeController({
        toggle: true,
        lightTheme: 'light',
        darkTheme: 'dark',
        checked: () => isDark.value,
        onChange: (dark) => { isDark.value = dark; }
    }),
    span({ class: 'text-sm' }, () => isDark.value ? '🌙 Dark Mode' : '☀️ Light Mode')
);

$('#demo').insert(demo);

const { default: ThemeController } = await import('/components/actions/theme-controller.js');

const { signal, tags, $ } = Lightview;
const { div } = tags;

const themes = ['light', 'dark', 'cupcake', 'cyberpunk', 'synthwave'];
const current = signal('light');

const demo = div({ class: 'flex flex-wrap gap-2' },
    ...themes.map(theme =>
        ThemeController({
            radio: true,
            name: 'theme-select',
            theme: theme,
            label: theme.charAt(0).toUpperCase() + theme.slice(1),
            checked: () => current.value === theme,
            onChange: () => { current.value = theme; }
        })
    )
);

$('#demo').insert(demo);

Props

Toggle (Light/Dark)

Radio Buttons