components

Theme Controller

components

Tailwind CSS Theme Controller

If a checkbox or radio input with the theme-controller class is present on the page, the page's theme will be set to the value of that input.

Class Name	Type	Description
theme-controller	Component	For a checkbox or radio button input intended to toggle the page theme.

The Theme Controller changes the theme using only CSS. You can use JavaScript to save the input state to the server or localStorage if you want it to persist across page refreshes.

Basic example

Checkbox

Use the theme-controller component class with a checkbox input to create a theme switcher that toggles between the default theme and the theme specified in the value.

Switch

Create a theme controller using a switch based on the example provided below.

Illustrations

Using swap

The example below shows how to implement a theme controller using a switch component.

<label class="swap swap-rotate">
  <input type="checkbox" value="dark" class="theme-controller" />
  <span class="swap-off icon-[tabler--sun] size-7"></span>
  <span class="swap-on icon-[tabler--moon] size-7"></span>
</label>

Using switch with text

The example below illustrates how to create a theme controller using a switch combined with text.

<label class="flex cursor-pointer gap-2">
  <span class="label-text">Light</span>
  <input type="checkbox" value="dark" class="switch theme-controller" />
  <span class="label-text">Dark</span>
</label>

Using switch with icons inside

The example provided shows how to build a theme controller using a switch that features icons.

<label class="relative inline-block">
  <input type="checkbox" value="dark" class="switch switch-primary theme-controller peer" />
  <span class="icon-[tabler--sun] peer-checked:text-primary-content absolute start-1 top-1 block size-4"></span>
  <span class="icon-[tabler--moon] text-base-content peer-checked:text-base-content absolute end-1 top-1 block size-4" ></span>
</label>

Using a switch with custom colors

The example below shows how to build a theme controller using a switch with personalized colors.

Using a radio input

Create a theme controller using a radio input based on the example below.

<div class="flex flex-col gap-1">
  <div>
    <div class="flex items-center justify-between gap-4">
      <label class="label label-text" for="defaultTheme">Default</label>
      <input type="radio" name="theme-radios" class="radio theme-controller" id="defaultTheme" value="default" checked />
    </div>
  </div>
  <div>
    <div class="flex items-center justify-between gap-4">
      <label class="label label-text" for="corporateTheme">Corporate</label>
      <input type="radio" name="theme-radios" class="radio theme-controller" id="corporateTheme" value="corporate" />
    </div>
  </div>
  <div>
    <div class="flex items-center justify-between gap-4">
      <label class="label label-text" for="gourmentTheme">Gourmet</label>
      <input type="radio" name="theme-radios" class="radio theme-controller" id="gourmentTheme" value="gourmet" />
    </div>
  </div>
</div>

Using a radio button

The example below shows how to create a theme controller using a radio button.

<div class="join join-vertical">
  <input type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Default" value="default" checked />
  <input type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Corporate" value="corporate" />
  <input type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Gourmet" value="gourmet" />
</div>

Here’s a ready-to-use example of a theme controller utilizing a dropdown menu.

For more information about dropdowns, refer to the Dropdown documentation.

<div class="dropdown relative inline-flex [--auto-close:inside] rtl:[--placement:bottom-end]">
  <button id="dropdown-default" type="button" class="dropdown-toggle btn btn-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown" >
    Dropdown
    <span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
  </button>
  <ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-default" >
    <li>
      <input type="radio" name="theme-dropdown" class="theme-controller btn btn-text w-full justify-start" aria-label="Default" value="default" checked />
    </li>
    <li>
      <input type="radio" name="theme-dropdown" class="theme-controller btn btn-text w-full justify-start" aria-label="Corporate" value="corporate" />
    </li>
    <li>
      <input type="radio" name="theme-dropdown" class="theme-controller btn btn-text w-full justify-start" aria-label="Gourmet" value="gourmet" />
    </li>
  </ul>
</div>

The theme-change plugin by daisyUI is a powerful tool for implementing dynamic theme switching in your projects. It allows users to select, toggle, or customize themes while seamlessly saving their preferences in local storage for a consistent user experience.

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate theme-change into your project for efficient theme switching functionality with storing in local storage.

1
Step 1: Install theme-change
Install theme-change via npm.
npm i theme-change --save
2
Step 2: Include it in javascript file.
To integrate theme-change, add the following code in your javascript file.
import { themeChange } from 'theme-change' themeChange()
You can also use a CDN link.
Include the following <script> tag near the end of your </body> section:
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
3
Step 3: Basic use case of theme-change.
The below example showcase the toggle functionality using the switch component.
<input type="checkbox" data-toggle-theme="luxury" class="switch" />

The theme-change plugin offers three primary attributes to manage themes dynamically:

data-set-theme="luxury"
Use this attribute to set the theme directly for components such as buttons, radio buttons, and dropdowns. The theme is applied upon user interaction (e.g., clicking a button).
data-choose-theme
This attribute is designed for select components. It dynamically applies the theme based on the selected option from a dropdown menu.
data-toggle-theme="soft"
Ideal for toggle components like checkboxes and switches. This attribute allows users to switch between themes interactively by toggling the element.

It also provides the data-act-class="ACTIVECLASS" attribute, which applies the specified ACTIVECLASS to the element when it is clicked or toggled.

For a live demonstration and detailed example of using FlyonUI with the theme-change plugin, check out this StackBlitz example.

Swap

Timeline

FlyonUI