Theme Controller

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.

Supported on

105+

121+

15.4+

Class name	Type
theme-controller	Component	For a checkbox or radio input that must change the page theme

Theme Controller changes the theme using CSS only. You can then use JS to save the input state in the server or localStorage if you want it to persist on page refresh.
Here's a React example to save checkbox state in local storage: Stackblitz

# Theme Controller using a toggle

# Theme Controller using a checkbox

# Theme Controller using a swap

# Theme Controller using a toggle with text

Default Synthwave

# Theme Controller using a toggle with icons

# Theme Controller using a toggle with icons inside

# Theme Controller using a toggle with custom colors

# Theme Controller using a radio input