When i change theme, the text color is still same as in dark theme.
Answered
Gulf menhaden posted this in #help-forum
Gulf menhadenOP
import Navbar from "@/components/header/navbar";
export default function Home() {
return (
<main>
<Navbar />
<br></br>
<br></br>
<br></br>
<br></br>
<p className="text-center text-black dark:text-white">test</p>
</main>
);
}my theme switch:
"use client";
import { useTheme } from "next-themes";
import DarkThemeIcon from "@/components/icons/dark-theme";
import LightThemeIcon from "@/components/icons/light-theme";
export default function ThemeChanger() {
const { theme, setTheme } = useTheme();
return (
<div>
{theme === "dark" ? (
<button onClick={() => setTheme("light")}>
<LightThemeIcon className="w-6 h-6 text-white" />
</button>
) : (
<button onClick={() => setTheme("dark")}>
<DarkThemeIcon className="w-6 h-6 text-black" />
</button>
)}
</div>
);
}tailwind config:
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: "class",
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
export default config;4 Replies
Gulf menhadenOP
in light theme:
in dark theme:
it should be the opposite of what the css tags say
Gulf menhadenOP
i added this, and working
Answer