export default function CustomLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko-KR">
<link rel="icon" href="/favicon.ico" sizes="any" />
<body>
<ThemeProvider>
<Topbar />
<div className={styles.mainContentContainer}>
<main className={styles.mainContent}>
{children}
<Footer />
</main>
</div>
<BottomBar />
</ThemeProvider>
</body>
</html>
);
}
/** ThemeProvider.tsx */
"use client";
import { darkTheme, ligthTheme } from "@/app/styles/themes/theme.css";
import "../../globals.css";
import { themeContainer } from "./ThemeProvider.css";
import { useEffect, useState } from "react";
import themeStore from "@/app/store/themeStore";
const ThemeProvider = ({ children }: any) => {
const { isDark } = themeStore();
const [theme, setTheme] = useState<string | null>("");
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => {
if (mounted) {
document.body.style.backgroundColor =
theme === "dark" ? "rgb(16,16,16)" : "rgb(245,245,245";
}
}, [theme, mounted]);
useEffect(() => {
setTheme(localStorage.getItem("theme"));
}, [isDark]);
if (!mounted) return null;
return (
<div className={` ${theme === "dark" ? darkTheme : ligthTheme}`}>
<div className={themeContainer}>{children}</div>
</div>
);
};
export default ThemeProvider;
I saved the selected theme in LocalStorage.
Incorporated a new component and placed children within RootLayout.
Based on my understanding, when the above component is considered client-side, so is the subsequent one.
However, in this scenario, I was able to utilize server components internally (e.g. cookie, "use server"...).
I aim to grasp the distinction between including components within ThemeProvider tags versus inside the ThemeProvider.tsx file itself.
With the latter case, internal components are unable to use server-side components.