toggle theme troubleshoot tailwind css

[umair-sajjad]

This is code of my page.jsx

"use client"
import { useEffect, useState } from "react";

export default function Home() {
  
  const [theme, setTheme] = useState(() => {
    if (typeof window !== "undefined") {
      return localStorage.getItem("theme") || "light";
    }
    return "light";
  });

    useEffect(() => {
      // Ensure only one class is applied (remove both before adding)
      document.documentElement.classList.remove("light", "dark");
      document.documentElement.classList.add(theme);

      // Save the selected theme
      localStorage.setItem("theme", theme);
    }, [theme]);
    
    const toggleTheme = () => {
      setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    };

  return (
    <>
    <button
      onClick={toggleTheme}
      className="p-4 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300"
    >
      {theme === "light" ? "🌙 Dark Mode" : "☀️ Light Mode"}
    </button>
      <div className="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
        <div>
          <span className="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
            <svg className="h-6 w-6 stroke-white">
            </svg>
          </span>
        </div>
        <h3 className="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
        <p className="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
          The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
        </p>
      </div>
    </>    
  );
}

and global.css only includes
@import "tailwindcss";
but theme is not toggling. Only dark classes applying on the page, and when I include
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
in global.css then light theme appears but toggle button stucks on light theme.

"dependencies": {
    "@tailwindcss/postcss": "^4.0.14",
    "next": "15.2.2",
    "postcss": "^8.5.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.14"
  }

i cant figure out what is the problem. I search a lot but only figure out that may be problem is with prefer-color-scheme
Anybody knows the solution kindly reply me...

[wongjn]

You'd want to use dark class, not data-theme attribute. Add the following to your global.css file:

@custom-variant dark (&:where(.dark, .dark *));