--- title: Theme Controller desc: 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. layout: components classnames: component: - class: theme-controller desc: For a checkbox or radio input that must change the page theme browserSupport: chrome: 105 firefox: 121 safari: 15.4 --- > :INFO: > > 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](https://stackblitz.com/edit/react-checkbox-localstorage?file=src%2FApp.js) > :INFO: > > If you're using [Tailwind CSS prefix](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-prefix-option), it won't add prefix to `theme-controller` class. If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `theme-controller` class. ### ~Theme Controller using a toggle ```html ``` ### ~Theme Controller using a checkbox ```html ``` ### ~Theme Controller using a swap ```html ``` ### ~Theme Controller using a toggle with text Default Synthwave ```html Current Synthwave ``` ### ~Theme Controller using a toggle with icons ```html ``` ### ~Theme Controller using a toggle with icons inside ```html ``` ### ~Theme Controller using a toggle with custom colors ```html ``` ### ~Theme Controller using a radio input ```html ``` ### ~Theme Controller using a radio button ```html ``` ### ~Theme Controller using a dropdown ```html ```