How to get the current theme ? #1140
-
|
I need to extract the current theme to update some content based on the current one? Is there a hook or somewhere I can get the current theme from ?? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
install and use |
Beta Was this translation helpful? Give feedback.
-
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body>
<ThemeProvider>
<RootProvider>{children}</RootProvider>
</ThemeProvider>
</body>
</html>
);
}"use client";
import Image from "next/image";
import { useTheme } from "next-themes";
const Logo = () => {
const { theme } = useTheme();
console.log("theme: ", theme);
return (
<Image
src={theme === "light" ? "/black-logo.svg" : "/white-logo.svg"}
alt="logo"
width={100}
height={50}
className="pl-2"
/>
);
};
export default Logo;Using this code and getting the current theme, |
Beta Was this translation helpful? Give feedback.
-
|
You don't need another provider, and you can use |
Beta Was this translation helpful? Give feedback.
-
|
Removing the provider from theme provider here's the code this logo component is used inside the top navbar |
Beta Was this translation helpful? Give feedback.
-
|
You somehow installed Fumadocs v13, which uses |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, it works after matching the versions |
Beta Was this translation helpful? Give feedback.
-
|
Hello @fuma-nama I think I might be having a similar issue but with the latest versions where both
|
Beta Was this translation helpful? Give feedback.
You somehow installed Fumadocs v13, which uses
next-themes0.3.0 (an older version), you have to make sure you have installed the exact version ofnext-themesFumadocs uses, or upgrade to latest versions of Fumadocs to avoid this issue