Creando dark mode en react con tailwind

Hola amigos de la #nerditud.

En el día de hoy quiero compartirles cómo crear un template de modo oscuro o dark mode, con react y tailwind css.

Crear la aplicación

npm init vite@latest dummy -- --template react

cd dummy

npm install

Agregar tailwind

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Modificar archivo tailwindcss.cjs

/** @type {import('tailwindcss').Config} */
(module.exports = {
  "content": ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  "darkMode": "class",
  "theme": {
    "extend": {}
  },
  "plugins": []
})

Modificar archivo index.css

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

Reescribimos archivo App.jsx

import { useState } from 'react'

function App() {
  const [darkMode, setDarkMode] = useState(false)

  const toggleDarkMode = () => {
    setDarkMode(!darkMode)
  }

  return (
    <div className={`${darkMode ? 'dark' : 'light'}`}>
      <div className="w-full h-screen font-star bg-base-100 dark:bg-gray-700 dark:text-white">
        <button
          className="m-8 pt-2 pr-4 pb-2 pl-4 rounded border bg-gray-700 text-white dark:bg-white dark:text-gray-700"
          onClick={() => toggleDarkMode()}
        >
          click
        </button>
      </div>
    </div>
  )
}

export default App

Testeamos la aplicación

npm run dev

http://localhost:5173/