Sponsored

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.   

Sponsored

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
1

or

npm install daisyui use-hooks
1

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")],
};
12345678910111213141516
Sponsored

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;

123456789101112131415161718192021222324252627282930313233

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

Sponsored

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. 

Sponsored

Demo#

Sponsored

Resources#

Share this post!

Related Posts

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.