Adding Themes to a Next.js Application using DaisyUI

In this detailed guide, we'll explore how to add themes to your Next.js application using DaisyUI. DaisyUI is a plugin for Tailwind CSS that provides a set of premade themes and UI components, making it easy to create a polished and cohesive design.

1. Setting Up the Sidebar

Before we start with themes, ensure that your sidebar is almost complete. This step is crucial to have a structured layout where the themes will be applied effectively.

2. Integrating DaisyUI

We'll begin by integrating DaisyUI into our application.

Step 1: Install DaisyUI

npm install daisyui tailwindcss

Step 2: Configure Tailwind CSS

Next, configure Tailwind CSS to use DaisyUI. In your tailwind.config.js file, add DaisyUI to the plugins section:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    themes: ["winter", "dracula"], // Add the themes you want to use
  },
}

Step 3: Choose Themes

DaisyUI provides a variety of themes. You can view and select themes from the DaisyUI documentation. For this example, we'll use the "Winter" theme for light mode and the "Dracula" theme for dark mode.

3. Applying Themes

Now that we have DaisyUI set up, let's apply the themes to our application.

Step 4: Add Theme Toggle Logic

We'll create a theme toggle component to switch between the selected themes.

Create ThemeToggle.js Component

import { useState, useEffect } from 'react';

export default function ThemeToggle() {
  const themes = {
    winter: 'winter',
    dracula: 'dracula',
  };

  const [theme, setTheme] = useState(themes.winter);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === themes.winter ? themes.dracula : themes.winter));
  };

  return (
    <button className="btn btn-sm btn-outline" onClick={toggleTheme}>
      {theme === themes.winter ? '🌞' : '🌙'}
    </button>
  );
}

Step 5: Update Layout to Include ThemeToggle

Include the ThemeToggle component in your layout. This ensures that the theme toggle is available throughout your application.

Update layout.js (or relevant layout file)

import ThemeToggle from './components/ThemeToggle';

export default function Layout({ children }) {
  return (
    <div>
      <header className="p-4 flex justify-between items-center">
        <h1>My Application</h1>
        <ThemeToggle />
      </header>
      <main>{children}</main>
    </div>
  );
}

4. Testing the Themes

After setting up the themes and the toggle component, it's time to test it out.

Step 6: Run the Development Server

Start your development server to see the changes in action:

npm run dev

Step 7: Verify the Themes

Navigate to your application in the browser. You should see the theme toggle button in the header. Click the button to switch between the "Winter" and "Dracula" themes. If the themes don't switch, try refreshing the page.

5. Enhancing User Experience

Step 8: Smooth Theme Transition

For a smoother user experience, you can add transitions to your CSS to animate the theme switch.

Update global.css (or relevant CSS file)

html {
  transition: background-color 0.3s, color 0.3s;
}

Step 9: Remember User Preference

To remember the user's theme preference, store the theme in localStorage and load it on component mount.

Update ThemeToggle.js

import { useState, useEffect } from 'react';

export default function ThemeToggle() {
  const themes = {
    winter: 'winter',
    dracula: 'dracula',
  };

  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || themes.winter);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === themes.winter ? themes.dracula : themes.winter));
  };

  return (
    <button className="btn btn-sm btn-outline" onClick={toggleTheme}>
      {theme === themes.winter ? '🌞' : '🌙'}
    </button>
  );
}

Conclusion

By following these steps, you can seamlessly integrate themes into your Next.js application using DaisyUI. The theme toggle component allows users to switch between light and dark modes, enhancing the user experience. This approach provides a solid foundation for further customization and theme management in your application.

Happy theming!