This page shows different ways of using existing components to implement theme controllers. For complete theming setup and configuration, see the Theming documentation.
Toggle Theme Controller
Default
daisyUI Light Mode
<div class="flex items-center gap-4">
<span class="text-sm">Default</span>
<c-lb.toggle class="theme-controller" value="light" size="sm" />
<span class="text-sm">daisyUI Light Mode</span>
</div>
Swap Theme Controller
<div class="flex items-center gap-4">
<c-lb.swap inputClass="theme-controller" value="light">
<c-lb.swap.on class="flex items-center gap-2">
<c-lbi n="rmx.sun" w="1.5em" h="1.5em" />
<span class="text-sm">daisyUI Light Theme</span>
</c-lb.swap.on>
<c-lb.swap.off class="flex items-center gap-2">
<c-lbi n="rmx.moon" w="1.5em" h="1.5em" />
<span class="text-sm">Default Theme</span>
</c-lb.swap.off>
</c-lb.swap>
</div>
Dropdown Theme Controller
Theme
<c-lb.dropdown alignment="start" size="sm">
<c-lb.dropdown.trigger class="btn btn-sm">
<c-lbi n="rmx.sun" w="1.5em" h="1.5em" />
Theme
</c-lb.dropdown.trigger>
<c-lb.dropdown.content class="bg-base-100 rounded-box w-52 shadow-md border border-base-200">
<c-lb.menu class="w-full">
<input
type="radio"
name="theme"
value="labb-light"
class="theme-controller btn btn-ghost btn-sm justify-start"
aria-label="Light"
/>
<input
type="radio"
name="theme"
value="labb-dark"
class="theme-controller btn btn-ghost btn-sm justify-start"
aria-label="Dark"
/>
<input
type="radio"
name="theme"
value="light"
class="theme-controller btn btn-ghost btn-sm justify-start"
aria-label="Daisy Light"
/>
<input
type="radio"
name="theme"
value="dark"
class="theme-controller btn btn-ghost btn-sm justify-start"
aria-label="Daisy Dark"
/>
</c-lb.menu>
</c-lb.dropdown.content>
</c-lb.dropdown>
Backend Persistence
For backend theme persistence, use the c-lb.m.dependencies component to automatically handle theme switching with Django sessions. See theme persistence for more details.
Theme:
Light Mode
<!--
To enable backend theme persistence, add the dependencies component to your base template's <head> section:
<head>
...
<c-lb.m.dependencies setThemeEndpoint="{% url 'set_theme' %}" />
...
</head>
-->
<div class="flex items-center gap-4">
<span class="text-sm">Theme:</span>
<c-lb.toggle class="theme-controller" value="light" size="sm" />
<span class="text-sm">Light Mode</span>
</div>