ThemeSwitcher
AppTri-state theme selector (light / dark / system). Persists the choice to localStorage and toggles the .dark class on <html>. Mounts safely on the server with a placeholder until hydrated.
<%- include('modules/app/ThemeSwitcher') %><%- include('modules/app/ThemeSwitcher', {
id: 'header-theme-switcher',
className: 'shrink-0'
}) %><%
var _id = locals.id || ('theme-switcher-' + Math.random().toString(36).slice(2, 8));
var _className = locals.className || '';
var _menuId = _id + '-menu';
// Trigger label/icon are placeholders; the IIFE rewrites them from
// localStorage on mount.
var triggerHtml =
'' +
'System' +
'';
%>
<%- include('../ui/DropdownMenu', {
id: _id,
align: 'right',
className: _className,
trigger: '' + include('../ui/Button', {
variant: 'outline',
size: 'sm',
className: 'gap-2',
children: triggerHtml,
}) + '',
items: [
{ type: 'item', label: 'Light', icon: '', onClick: "window.__themeSwitcher_set && window.__themeSwitcher_set('" + _id + "', 'light')" },
{ type: 'item', label: 'Dark', icon: '', onClick: "window.__themeSwitcher_set && window.__themeSwitcher_set('" + _id + "', 'dark')" },
{ type: 'item', label: 'System', icon: '', onClick: "window.__themeSwitcher_set && window.__themeSwitcher_set('" + _id + "', 'system')" },
],
}) %>