How to setup DaisyUI theme with Nextjs

Jasser Mark Arioste

Jasser Mark Arioste

How to setup DaisyUI theme with Nextjs

DaisyUI themes functionality is great because it's not limited to light/dark mode you simply have to add data-theme="your-theme-name" to the root HTML element. Daisy UI is a great CSS library for speeding up the creation of components in TailwindCSS since we don't have to add as many classes as much as the bare TailwindCSS library. 

Today I'm going to show you how to set this up on Next.js or React so that the theme data will be stored in local storage and be saved in the user's browser

This guide assumes that you've already setup tailwindcss in your next.js project so we'll skip that part.   

Install and Configure DaisyUI #

Install daisyui and add it to the modify tailwind.config.js and add it to the plugins. Install use-hooks as well so that we can use useLocalStorage hook later on.

yarn install daisyui use-hooks


npm install daisyui use-hooks

Add daisyui to plugins  inside tailwind.config.js and add your chosen themes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  daisyui: {
    themes: [

  plugins: [require("daisyui")],

Implement a button to handle change theme #

This is where the magic happens. Let's see how it's done!


import React, { useEffect } from "react";
import { FiMoon, FiSun } from "react-icons/fi";
import { useLocalStorage } from "usehooks-ts";
const SwitchTheme = () => {
  //we store the theme in localStorage to preserve the state on next visit with an initial theme of dark.
  const [theme, setTheme] = useLocalStorage("theme", "dark");

  //toggles the theme
  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");

  //modify data-theme attribute on document.body when theme changes
  useEffect(() => {
    const body = document.body;
    body.setAttribute("data-theme", theme);
  }, [theme]);

  return (
    <button className="btn btn-circle" onClick={toggleTheme}>
      {theme === "dark" ? (
        <FiMoon className="w-5 h-5" />
      ) : (
        <FiSun className="w-5 h-5" />

export default SwitchTheme;


In the above code is a very simple example on how to change theme in DaisyUI.

Conclusion #

DaisyUI's approach with regards to changing theme is intuitive compared to the default tailwindcss approach. The default tailwind approach is where you have to put  "dark:" prefix classes on every component which is weird in my opinion since it bloats the html, degrades the code, just a nightmare for maintainability and has little to no flexibility. In contrast, daisyUI's approach is both maintainable and flexible as you can easily create and override themes. 

I think more people should use this css library. 

Demo #

Resources #

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle