Vyhledávání na webu

reactjs - Manuální tmavý režim Tailwindcss nefunguje v projektu NextJS

Potřebuji integrovat tmavý režim do svého projektu. Používám NextJs v12.1.3, React 18.1.0 a tailwindcss v3.1.2. Zkoušel jsem tento návod na oficiálních stránkách, ale manuální výběr mi nefunguje. Vždy se zobrazuje téma operačního systému.

Například, pokud chci vynutit světlé téma, udělám toto:

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

Toto vždy zobrazuje téma operačního systému. Také jsem toto přidal, abych to vynutil:

    // 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';

Také jsem to udělal do souboru _document.tsx:

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

Také jsem nastavil darkMode: 'class' do souboru tailwind.config.js

Toto je můj celý soubor tailwind.config.js

    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')],
    };

Upřímně řečeno, v tuto chvíli chci jen světlý režim, ale mám některé komponenty naformátované i pro tmavý režim a nechci je přeformátovávat, protože je budu později potřebovat.

Co myslíš, že jsem udělal špatně?

P.S. Nechci používat next-themes pro správu tmavého/světlého režimu.

Odpověď č. 1

Pokud je váš tailwind.config.js nakonfigurován s darkMode: 'class', ujistěte se, že při zabalení aplikace do ThemeProvider používáte:

<ThemeProvider attribute="class">

To řekne next-themes, aby na hlavní značku <HTML> používal třídy light/dark.

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

Odpověď č. 2

Pro manuální tmavý režim proveďte následující:

V souboru tailwind.config.css nastavte darkMode na class

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

A když potřebujete darkMode, stačí přidat ClassName s dark do značky html

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

A když potřebujete light, stačí odstranit ClassName dark uvnitř tagu html

Doufám, že to pomůže!

Související články