next-themes implementation using NextJS 13 App router, Nx monorepo and shadcn/ui fails
Unanswered
Sphecid wasp posted this in #help-forum
Sphecid waspOP
I am new to nextjs. I have a nextjs 13 application in an Nx monorepo. I am using shadcn/ui switch component to implement the dark mode. The ThemeProvider is used from next-themes.
I have simply added the switch at the top of the default nx nextjs page. But the switch toggle doesn't change the theme. and when I try to print the current theme in page.tsx infinite re-rederings are happening.
I have simply added the switch at the top of the default nx nextjs page. But the switch toggle doesn't change the theme. and when I try to print the current theme in page.tsx infinite re-rederings are happening.
10 Replies
Sphecid waspOP
can someone please tell what am I missing?
Sphecid waspOP
this is my main layout file
the main page.tsx
and this is the theme provider file
Sphecid waspOP
let me know if more info is required
Sphecid waspOP
I changed the provider class
'use client'
import React, { useEffect, useState } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true)
}, []);
if (!mounted) return #Unknown Channel{ }</>;
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
import React, { useEffect, useState } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true)
}, []);
if (!mounted) return #Unknown Channel{ }</>;
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
but still it is not working...now the theme is getting available at the client side....but nothing is getting displayed on the screen ...as the children are not getting rendered since mounted is false
hi guys...issue resolved now 😄