Next.js Discord

Discord Forum

When i change theme, the text color is still same as in dark theme.

Answered
Gulf menhaden posted this in #help-forum
Open in Discord
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;
Answered by Gulf menhaden
i added this, and working
View full answer

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