Jun 2, 2025

Client-side Theme Changer Using Tailwind, DaisyUI, and SvelteKit

One of the great things about DaisyUI is that it offers more than 35 built-in themes. Today, we're going to implement a very simple theme changer.

First lets enable the DaisyUI themes we want:

app.css

@import 'tailwindcss';
 
@plugin "daisyui" {
	themes:
		business --default,
		corporate;
}
 
@custom-variant theme-business (&:where([data-theme=business], [data-theme=business] *));
@custom-variant theme-corporate (&:where([data-theme=corporate], [data-theme=corporate] *));

I'm assiging a Tailwind custom variant to every theme so that we can easily style based on them later

Install theme-change:

pnpm add theme-change

In your root layout, initialize themeChange:

src/routes/+layout.svelte

<script lang="ts">
	import '../app.css';
 
	import { onMount } from 'svelte';
	import { themeChange } from 'theme-change';
 
	let { children } = $props();
 
	onMount(() => {
		themeChange(false);
	});
</script>
 
{@render children()}

Anywhere in the app you wish to allow your user to change themes:

<button
	data-set-theme="corporate"
	data-act-class="ACTIVECLASS"
	class="btn btn-ghost btn-circle theme-corporate:hidden"
>
	<SunIcon />
</button>
<button
	data-set-theme="business"
	data-act-class="ACTIVECLASS"
	class="btn btn-ghost btn-circle theme-business:hidden"
>
	<MoonIcon />
</button>

And that's it. You can add as many DaisyUI themes as you'd like.

Buy me a coffee