How actually use the theme switcher?

[mamcx]

So, getting any of the https://daisyui.com/components/theme-controller/ (I pick the sun/moon) don't just make the theme change.

Of course there is some kind of js I need to write. but I think will be nice if that is explained in the docs. BTW what is required to make the theme switch to work?

[saadeghi]

Here's how to enable themes:
https://daisyui.com/docs/themes/#enable-a-built-in-theme

Or enable all themes:
https://daisyui.com/docs/themes/#enable-all-themes

For example

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, silk, abyss;
}

Now checking this checkbox will enable the abyss theme.

<input type="checkbox" value="abyss" class="toggle theme-controller" />

This is CSS so it doesn't get saved anywhere.

• You can save it on the server (as user setting)
• You can save in cookies
• You can save it in local storage

It's up to you.

There's a link to a React example on the docs: https://stackblitz.com/edit/react-checkbox-localstorage?file=src%2FApp.js
But you can use a similar code for any framework to save the checkbox value in localstorage.

Let me know if you have a question.

[mamcx]

Ok, but that not worked for me. My problem is not store the theme, is to switch it.

I have:

{
  "dependencies": {
    "@tailwindcss/cli": "^4.0.14"
  },
  "devDependencies": {
    "daisyui": "^5.0.3",
    "tailwindcss": "^4.0.14"
  }
}

<label class="swap swap-rotate">
    <input type="checkbox" class="theme-controller" value="dark" />

    <!-- sun icon -->
    <svg>
    </svg>

    <!-- moon icon -->
    <svg>
    </svg>
</label>

I found that only work if is:

@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
}

This don't:

@plugin "daisyui/theme" {
    name: "dark";
    color-scheme: "dark";
    --color-base-100: oklch(20.84% 0.008 17.911);
    --color-base-200: oklch(18.522% 0.007 17.911);
...
}

@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
} 

But this do:

@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
} 

@plugin "daisyui/theme" {
    name: "dark";
    color-scheme: "dark";
    --color-base-100: oklch(20.84% 0.008 17.911);
    --color-base-200: oklch(18.522% 0.007 17.911);
...
}

Change other theme don't:

<input type="checkbox" class="theme-controller" value="forest" /> // or dark, neither worked

@plugin "daisyui" {
    themes: light --default, forest --prefersdark;
}

@plugin "daisyui/theme" {
    name: "forest";
    color-scheme: "dark";
    --radius-selector: 1rem;
    --radius-field: 0.25rem;
    --radius-box: 0.25rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}