• 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-controllerComponentFor 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.

Here’s an example demonstrating how to save the checkbox state in localStorage: Stackblitz

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.

Using switch with text

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

Using switch with icons inside

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

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.

Using a radio button

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

Using a dropdown

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