Tailwindcss manual dark mode doesn't work in NextJS project

Question

I need to integrate the dark mode into my project. I use NextJs v12.1.3, react 18.1.0 and tailwindcss v3.1.2. I tried this guide on the official site, but the manual selection doesn't work for me. It always shows the operating system's theme.

For example if I want to force the theme to be light I do this:

    <html className="light">
      <body className="h-10 w-10">
        <div className="bg-white flex w-10 h-10 dark:bg-black"></div>
      </body>
    </html>

This shows always the OS' theme. I also added this to force it:

    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
    
    // Whenever the user explicitly chooses light mode
    localStorage.theme = 'light';

I also did this into the _document.tsx file:

    <Html className="light">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>

I also set up darkMode: 'class' into the tailwind.config.js file

This is my full tailwind.config.js file

    const colors = require('tailwindcss/colors');

    module.exports = {
      purge: [],
      darkMode: 'class',
      content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
      ],
      tailwindcss: {},
      autoprefixer: {},
      theme: {
        colors: {
          transparent: 'transparent',
          current: 'currentColor',
          black: '#212121',
          white: colors.white,
          gray: {
            ...colors.gray,
            100: '#f0f2f5',
            200: '#DADFE7',
            300: '#a9b5c6',
            400: '#6c809d',
            500: '#647697',
            600: '#5a6C87',
            700: '#394556',
            800: '#313B49',
            900: '#181D25',
          },
          teal: {
            50: '#ECFDFA',
            100: '#DAFCF6',
            200: '#B4F8ED',
            300: '#8FF5E4',
            400: '#6AF1DB',
            500: '#47EED1',
            600: '#15E0BE',
            700: '#10A88F',
            800: '#0A705F',
            900: '#053830',
          },
          indigo: colors.indigo,
          red: colors.rose,
          yellow: colors.amber,
          orange: {
            ...colors.orange,
            300: '#ffce30',
            700: '#d49100',
          },
          extend: {
            transitionDuration: {
              0: '0ms',
              2000: '2000ms',
            },
          },
        },
      },
      plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
    };

To be honest, I want only light mode at this moment, but I have some components styled also for dark mode and I don't want to restyle them because later I will need it.

What do you think I did wrong?

P.S. I don't want to use next-themes to handle the dark/light mode.

Can you add your full `tailwind.config.js` file to the question? — Ed Lucas, Jun 16 '22 at 14:27
What do you actually want ? you are saying manual dark mode is not working in the question, but at the end you are saying you want only the light mode, Which mode do you want? And how do you want ? you want to force dark / light mode ? or leave it to system option ? — krishnaacharyaa, Jun 21 '22 at 09:07
If I say I need light mode only, it means that it cannot be automatic. Yes I need to force light mode, In fact I wrote : "To be honest, I want only light mode at this moment, but I have some components styled also for dark mode and I don't want to restyle them because later I will need it.". If it has to be forced it means also that it has to be set manually. It would not be dynamic, all right but it is not automatic. — Loudrous, Jun 21 '22 at 12:58

score 2 · Answer 1 · answered Jun 06 '23 at 02:56

Assuming your tailwind.config.js is configured with darkMode: 'class', make sure that when you wrap the app in the ThemeProvider you use:

<ThemeProvider attribute="class">

That will tell next-themes to use light/dark classes on the main <HTML> tag.

Source: https://github.com/pacocoursey/next-themes#class-instead-of-data-attribute

score 0 · Answer 2 · answered Jun 21 '22 at 09:28

For Manual dark mode , do the following :

In tailwind.config.css set the darkMode to class

module.exports = {
  darkMode: 'class',
  // ...
}

And when you need the darkMode just add ClassName of dark inside the html tag

<html className="dark">
<body>
  <!-- Will be black -->
  <div className="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

And when you need the light just remove ClassName of dark inside the html tag

Hope it helps!

score 0 · Answer 3 · answered Apr 09 '23 at 12:19

0

If you use from

next-themes

or

use-dark-mode

To manage dark mode it will add .dark-theme class but tailwind need .dark

What is the solution now?

Add the following code to tailwind.config.js file

darkMode: ['class','.dark-theme']

answered Apr 09 '23 at 12:19

Esmail Shahbazi

1

Tailwindcss manual dark mode doesn't work in NextJS project

3 Answers3