Sveltekit Daisyui theme switcher| Sabbirz

Initial Project Setup

Install sveltekit

terminal or console

npm create svelte@latest .

Add tailwind using npx

terminal or console

npx svelte-add@latest tailwindcss

Install daisyui

terminal or console

npm i daisyui

Open tailwind.config.cjs and add daisyui by including this line inside the plugin array: require('daisyui')

The final code should look like this:

tailwind.config.cjs

const config = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};
module.exports = config;

Let's check the result in the browser

terminal or console

npm run dev -- --host

The website will use the dark or light theme based on your system's theme. This is the default behavior of DaisyUI.

To manually control or force this setting, open app.html and add data-theme attributes to the html tag:

app.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <!-- Rest of the code -->
</html>

app.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
  <!-- Rest of the code -->
</html>

This way, you can have control over the website's theme.

Allowing Users to Switch Between Themes

Open the +page.svelte file under the routes directory and update the code

+page.svelte

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

I'm assuming you have set the data-theme value to light in app.html

Check the website, and you will notice that you can switch between the dark and light themes.

Switching Between DaisyUI Theme Libraries

Open the tailwind.config.js file, and add the configuration for daisyui

tailwind.config.js

/** @type {import('tailwindcss').Config}*/
const config = {
  content: ["./src/**/*.{html,js,svelte,ts}"],

  theme: {
    extend: {},
  },

  plugins: [require("daisyui")],

  // daisyUI config (optional - here are the default values)
  daisyui: {
    themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  },
};

module.exports = config;

With this DaisyUI configuration, we can now use all the themes of DaisyUI.

Let's check all the available themes of DaisyUI

Daisyui Themes

Let's open the +page.svelte file again and change the value to forest

+page.svelte

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

Check your website, and you will notice that the theme switcher is now working.

With this method, you can switch between all the available themes of DaisyUI.