@JAleXDesigN
Posted
Hi, you can use npm install @wits/next-themes
, I have used this a few times for themes in Next js with appDir and it works fine.
You wrap the layout with the ServerThemeProvider
import "./globals.css";
import { Inter } from "next/font/google";
import { ServerThemeProvider } from "@wits/next-themes";
import Providers from "./Providers";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ServerThemeProvider>
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
</ServerThemeProvider>
);
}
and for the client side provider you can do it in a separate component and use it in layout
"use client";
import type { FC, PropsWithChildren } from "react";
import { ThemeProvider } from "@wits/next-themes";
const Providers: FC<PropsWithChildren> = ({ children }) => {
return <ThemeProvider>{children}</ThemeProvider>;
};
export default Providers;
Marked as helpful