Theme Controller

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.

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.

Light Dark

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.

Default

Corporate

Gourmet

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.

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://github.com/saadeghi/theme-change" target="_blank" class="link link-primary font-semibold">theme-change</a> into your project for efficient theme switching functionality with storing in local storage.

JavaScript

import { themeChange } from 'theme-change'
themeChange()

Basic example