How to Change Themes Using DaisyUI and TailwindCSS in React

Are you looking to add a light/dark mode toggle to your React project using TailwindCSS and DaisyUI? This guide walks you through the simple steps to implement theme switching using DaisyUI, a powerful TailwindCSS plugin.

Step-by-Step Solution with Code

1. Install Dependencies

First, make sure you have TailwindCSS and DaisyUI installed in your React project.

npm install tailwindcss daisyui

Add DaisyUI to your tailwind.config.js file:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark'],
  },
}

2. Implement Theme Toggle in React Component

To toggle themes, add a state to track the current theme and apply it globally to the html element.

import React, { useEffect, useState } from 'react'

function ThemeToggle() {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light')

  // Toggle theme function
  const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark'
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  // Apply theme to HTML element
  useEffect(() => {
    document.querySelector('html').setAttribute('data-theme', theme)
  }, [theme])

  return (
    <label className="swap swap-rotate">
      <input type="checkbox" onChange={toggleTheme} />
      <svg
        className="swap-on h-8 w-8 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17Z" />
      </svg>
      <svg
        className="swap-off h-8 w-8 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" />
      </svg>
    </label>
  )
}

export default ThemeToggle

3. Style the Toggle

Use DaisyUI’s built-in styles for a clean toggle:

<label className="swap swap-rotate">
  <input type="checkbox" />
  <div className="swap-on">🌙 Dark Mode</div>
  <div className="swap-off">☀️ Light Mode</div>
</label>

This adds a visually appealing toggle button to your project.

4. Test and Enhance

Run your React project using:

npm start

Check if toggling the switch updates the theme correctly. The selected theme persists across refreshes thanks to localStorage.

FAQs

1. Why use DaisyUI for themes?

DaisyUI simplifies the process of managing themes and provides pre-designed, customizable components that work seamlessly with TailwindCSS.

2. Can I add more themes?

Yes, you can add custom themes in the tailwind.config.js file under the daisyui.themes array.

3. How do I make the theme persist across sessions?

Use localStorage to save the current theme and load it when the component mounts.

4. Are there alternative ways to toggle themes?

Yes, you can use libraries like react-daisyui or theme-change for more advanced theme management.