I’m developing my first simple Next.js+Tailwind app. It features a fixed header and a sidebar. The sidebar contains a button to toggle between dark and light mode. I’m using next-theme
and with Tailwind this was rather straightforward so far.
Now, one of the main content pages contains a directed graph. I currently use Cytoscape for this, which is overall a great library. My main problem right now is that Cytoscape does not support Tailwind-like styling. Creating a Cytoscape graph takes an input as follows:
const stylesheet = [
{
selector: 'node',
style: {
'backgroundColor': "#33FF66", // this color should change in dark mode
},
{
selector: "edge",
style: {
'curve-style': 'bezier',
'line-color': '#333333', // this color should change in dark mode
},
},
];
In other words, I would like my graph colors to change when toggling dark mode. My current consideration is to have to style sheets (e.g., stylesheetLight
and stylesheetDark
) and then switch between both sheets when the toggle button is pressed. However, I have no idea how I can listen to the toggle button residing in the sidebar in the page containing the graph. My RootLayout
looks as follows:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<html lang="en">
<body className="${inter.className} bg-slate-50 dark:bg-slate-800">
<div className="grid min-h-screen grid-rows-header">
<div>
<Header onMenuButtonClick={() => setSidebarOpen((prev) => !prev)} />
</div>
<div className="flex min-h-screen">
<div className="">
<Sidebar open={sidebarOpen} setOpen={setSidebarOpen} />
</div>
<div className="mt-[50px] flex-1">
<main>{children}</main>
</div>
</div>
</div>
</body>
</html>
);
}
How can I accomplish this? Do I have access to the toggle button in the page with the graph to add event listener?
Or is this even the correct approach anyway?