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?