How to setup DaisyUI Theme with Nextjs? #386

myhendry · 2022-01-10T05:01:40Z

myhendry
Jan 10, 2022

I refer to DaisyUI documentation but it does not provide instructions on how to use DaisyUI Themes with Nextjs. Anyone can point me to materials to show me how to use DaisyUI Theme with Nextjs? Thanks

Answered by saadeghi

Jan 10, 2022

Here's an example: https://github.com/saadeghi/daisyui/tree/master/examples/nextjs

View full answer

saadeghi · 2022-01-10T08:30:56Z

saadeghi
Jan 10, 2022
Maintainer

Here's an example: https://github.com/saadeghi/daisyui/tree/master/examples/nextjs

15 replies

ChristianOConnor Oct 7, 2022

This doesn't work for me:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div theme-data="synthwave">
  <Component {...pageProps} />
  </div>
  )
}

export default MyApp

Just gives the the same white default next.js page even when I have the correct tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    //...
    content: ['./pages/**/*.{js,ts,jsx,tsx}'],
    plugins: [require("daisyui")],
    daisyui: {
      themes: true
    }
  }

and postcss.config.js

module.exports = {
    plugins: ['tailwindcss', 'autoprefixer'],
  };

And I imported

@tailwind base;
@tailwind components;
@tailwind utilities;

at the top of globals.css.

Why isn't this providing the daisyui theme?

NayamAmarshe Oct 13, 2022

Why isn't this providing the daisyui theme?

You're doing it wrong.

In your _app.tsx do this:

import type { AppProps } from "next/app";
import "@/styles/globals.css";

function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
  return (
    <div data-theme="cupcake">
        <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

ChristianOConnor Oct 13, 2022

Why isn't this providing the daisyui theme?

You're doing it wrong.

In your _app.tsx do this:

import type { AppProps } from "next/app";
import "@/styles/globals.css";

function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
  return (
    <div data-theme="cupcake">
        <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

Awesome that fixed it thanks!

daveteu Oct 15, 2022

<html> is in _document.js of /pages/ folder.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html data-theme="light">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

You can toggle dark and light theme with

  const toggleDarkmode = () => {
    if (darkmode == 'light') {
      document.documentElement.classList.add('dark');
      document.documentElement.setAttribute('data-theme', 'dark');
      localStorage.setItem('color-mode', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      document.documentElement.setAttribute('data-theme', 'light');
      localStorage.setItem('color-mode', 'light');
    }
  };

This line sets the theme to dark theme

      document.documentElement.setAttribute('data-theme', 'dark');

This line is to set darkmode for tailwind so you can use dark:someclass

      document.documentElement.classList.add('dark');

jippy89 May 8, 2024

Hi @saadeghi, is there a new sample with the new NextJS 14?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to setup DaisyUI Theme with Nextjs? #386

{{title}}

Replies: 1 comment 15 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

How to setup DaisyUI Theme with Nextjs? #386

myhendry Jan 10, 2022

Replies: 1 comment · 15 replies

saadeghi Jan 10, 2022 Maintainer

ChristianOConnor Oct 7, 2022

NayamAmarshe Oct 13, 2022

ChristianOConnor Oct 13, 2022

daveteu Oct 15, 2022

jippy89 May 8, 2024

myhendry
Jan 10, 2022

Replies: 1 comment 15 replies

saadeghi
Jan 10, 2022
Maintainer