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

or

npm install daisyui use-hooks

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

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  daisyui: {
    themes: [
      "light",
      "dark"
    ],
  },

  plugins: [require("daisyui")],
};

Implement a button to handle change theme

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

//SwitchTheme.tsx

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" />
      )}
    </button>
  );
};

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

Checkout the demo on this url https://stackblitz.com/edit/nextjs-daisy-ui-xaqdim

Resources

Docs - https://daisyui.com/docs/themes/