Dark mode in React with Vite not working

[eduardoslg]

Hello, I'm having problems building an app on Vercel. Dark mode is not working. I've tried every way (I even took a look at the issues created) and it still doesn't work. Can anybody help me?

[headironc]

You need to provide a demo with the least amount of code to reproduce the problem

[eduardoslg]

basically in all div tags that I create I need to pass dark:bg-background? Is there no way to set it by default?

[yahia-berashish]

Hello @eduardoslg Can you provide some code or screenshots of the problem you are facing? The config files & App.tsx will be useful.

[hdadr]

Hello @eduardoslg Can you provide some code or screenshots of the problem you are facing? The config files & App.tsx will be useful.

I have the same issue. New vite react typescript app, and only added the shadcnui. Followed the dark mode installation in the doc for the vite. What I see is the html tag receives the class=light property, but does not change when I give dark as an initial value to the theme provider.

If I manually override it in the browser to (html class="dark") It does change the button theme, but the background stays white.

[yahia-berashish]

Can you provide your App.jsx and tailwind.config.js files? @hdadr

[hdadr]

Can you provide your App.jsx and tailwind.config.js files? @hdadr

vite -> react + typescript + SWC (there have been installed with npm the react-router and vite-pwa plugin but have not been set up in the project. First i wanted to make sure that shadcn-ui works fine)

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

App.tsx

import { Button } from "@/components/ui/button";
import { ThemeProvider } from "@/components/theme-provider";

function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <Button>Hello</Button>
    </ThemeProvider>
  );
}

export default App;

Result

[yahia-berashish]

Thanks for the additional context. I managed to recreate the issue by using the shadcn-ui CLI and choosing no for CSS Variables, which resulted in the tailwind.config.js file not having any color extensions while leaving the src/index.css file empty from any color variables too. I'm not sure if that is intended behavior or an issue with the CLI tool @shadcn.
You can solve the issue by initiating shadcn-ui again and enabling the CSS Variables option @hdadr, hope this solves your problem too @eduardoslg

[wangshaoyi9738]

I had this problem too, but I've solved it by enabling CSS variables. However, dark mode is not affected in next.js by whether CSS variables are enabled or not. Would like to be able to alert the need to enable CSS variables or make it consistent with next.js in vite dark mode pages.