How to setup DaisyUI theme with Nextjs
Jasser Mark Arioste
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-hooks1
or
npm install daisyui use-hooks1
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
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.
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
