Dark mode doesnt work after migrate to next js 15, react 19, and tailwind 4
Answered
Gharial posted this in #help-forum
GharialOP
Hi all,
Can anyone help me? My dark mode feature isn't working after upgrading to the latest version of next js, react, and tailwind. I’ve tried several solutions, but it still doesn’t work. I’ve debugged the mode toggle, and everything seems fine, the value changes, and the logo changed too. However, the background and content doesn't change as expected (still in the dark mode because the default value is in the dark mode). im not sure the problem in the config or mode toggle or anything else.
Can anyone help me? My dark mode feature isn't working after upgrading to the latest version of next js, react, and tailwind. I’ve tried several solutions, but it still doesn’t work. I’ve debugged the mode toggle, and everything seems fine, the value changes, and the logo changed too. However, the background and content doesn't change as expected (still in the dark mode because the default value is in the dark mode). im not sure the problem in the config or mode toggle or anything else.
Answered by Gharial
Solved, random try and it works lol
add this in your css @custom-variant dark (&:is(.dark *));
add this in your css @custom-variant dark (&:is(.dark *));
8 Replies
Rose-breasted Grosbeak
You should look at the generated css style
Northeast Congo Lion
Hi @Gharial
Check for conflicting styles or clear browser caching data.
Check for conflicting styles or clear browser caching data.
Dwarf Hotot
"use client";
import { useTheme } from "next-themes";
import { IoSunnyOutline } from "react-icons/io5";
import { IoMoonOutline } from "react-icons/io5";
const ThemeSwitcher = () => {
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
const newTheme = theme === 'dark' || theme === 'system' ? 'light' : 'dark';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
};
return (
#Unknown Channel
<button
className="relative h-9 w-9 transition ease-linear duration-200 rounded-lg bg-zinc-100 p-1.5 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
onClick={toggleTheme}
aria-label="Toggle theme"
>
<div className="relative flex items-center justify-center h-full w-full transition ease-linear duration-200">
<IoSunnyOutline className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
</div>
<div className="absolute flex items-center justify-center inset-0 p-1.5 transition ease-linear duration-200">
<IoMoonOutline className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</div>
</button>
</>
);
};
export default ThemeSwitcher;
import { useTheme } from "next-themes";
import { IoSunnyOutline } from "react-icons/io5";
import { IoMoonOutline } from "react-icons/io5";
const ThemeSwitcher = () => {
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
const newTheme = theme === 'dark' || theme === 'system' ? 'light' : 'dark';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
};
return (
#Unknown Channel
<button
className="relative h-9 w-9 transition ease-linear duration-200 rounded-lg bg-zinc-100 p-1.5 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
onClick={toggleTheme}
aria-label="Toggle theme"
>
<div className="relative flex items-center justify-center h-full w-full transition ease-linear duration-200">
<IoSunnyOutline className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
</div>
<div className="absolute flex items-center justify-center inset-0 p-1.5 transition ease-linear duration-200">
<IoMoonOutline className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</div>
</button>
</>
);
};
export default ThemeSwitcher;
use this code
<html lang="en">
<body
className={
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<SpeedInsights />
<Analytics />
<Footer />
</ThemeProvider>
</body>
</html>
<body
className={
${inter.className} antialiased}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<SpeedInsights />
<Analytics />
<Footer />
</ThemeProvider>
</body>
</html>
@Northeast Congo Lion Hi <@428950922446766101>
Check for conflicting styles or clear browser caching data.
GharialOP
i already clear the cache and use incognito mode
GharialOP
Solved, random try and it works lol
add this in your css @custom-variant dark (&:is(.dark *));
add this in your css @custom-variant dark (&:is(.dark *));
Answer