Dark Mode de forma simples e fácil utilizando Next Themes e Tailwind.css

Olá gente, talvez alguns de vocês já tentaram fazer o dark mode funcionar e fez algumas gambiarras ou até mesmo desistiu de fazer por ser muita função kk

Então vamos lá, se você já utiliza Tailwind talvez conheça o 'dark:', utilizado para adicionar as variantes dark na suas classes.

<p className="text-zinc-600 dark:text-zinc-400">Lorem Ipsum</p>

Para começar precisamos habilitar o dark mode por classe no arquivo tailwind.config.js

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

Fazer a troca de classe na mão pode ser um pouco chato então vamos utilizar o NextThemes para facilitar tudo pra gente.

npm i next-themes

Após instalado vamos no _app.jsx do seu projeto e adicionar o ThemeProvider:

<ThemeProvider attribute="class">
        <Component {...pageProps} />
</ThemeProvider>

Agora vamos configurar o botão para trocar de tema, criei um componente chamado ThemeToggler e tudo o que eu preciso fazer é importar o useTheme() hook do next-themes:

import { useTheme } from 'next-themes';

export default function ThemeToggler() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
      <button
        type="button"
        aria-label="Toggle dark mode"
        onClick={() => {
          setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
        }}
      >
       Modo escuro
      </button>
  );
}

E é isso. Espero que tenha ajudado!