Theme switcher (accessing things from outside other components.)
Unanswered
Forest bachac posted this in #help-forum
Forest bachacOP
I'm deploying an app and using app router, My layout.tsx file is:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const colors = ['light', 'dark', 'blue', 'highcontrast'];
const [color, setColor] = useState<string>(colors[1])
return (
<html className="h-full bg-white">
<body className="h-full">
<div className={[
'bg-primaryBg flex h-screen flex-col justify-center',
color &&
]
.filter(Boolean)
.join(' ')}>
<Sidebar />
{children}
</div>
</body>
</html>
)
}
Sidebar/ has a "theme switcher"
which is roughly this:
<div className="">
{colors.map((c) => {
return (
<div>
<RadioGroup.Option
className=""
value={c}
key={c}
>
{c}
</RadioGroup.Option>
</div>
);
})}
</div>
How can I have it change the state of color from the layout file - right now it's erroring because colors does not exist, it doesn't seem to matter if i add the colors and the setColor string to the sidebar function.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const colors = ['light', 'dark', 'blue', 'highcontrast'];
const [color, setColor] = useState<string>(colors[1])
return (
<html className="h-full bg-white">
<body className="h-full">
<div className={[
'bg-primaryBg flex h-screen flex-col justify-center',
color &&
theme-${color},]
.filter(Boolean)
.join(' ')}>
<Sidebar />
{children}
</div>
</body>
</html>
)
}
Sidebar/ has a "theme switcher"
which is roughly this:
<div className="">
{colors.map((c) => {
return (
<div>
<RadioGroup.Option
className=""
value={c}
key={c}
>
{c}
</RadioGroup.Option>
</div>
);
})}
</div>
How can I have it change the state of color from the layout file - right now it's erroring because colors does not exist, it doesn't seem to matter if i add the colors and the setColor string to the sidebar function.