Hi Nextjs-gang :)

I am working on a engineering-blog which fetches article data from a CMS. Each article has a color associated with it, and I would like to use this color to set the color on various elements across my site. My question is how I can access/pass this color value from a dynamic route that fetches a given article to my header and footer components. I have my <Header /> and <Footer /> in the root layout.tsx, and articles are fetched inside a dynamic route.

I am on Nextjs ^15, and using app router by the way.

I've asked some GPTs, and they recommend creating a ColorContext that I wrap my app in - but this entails making my entire app client side I think? That doesn't sound too appealing, so that's why I'm here to ask if there are any other options I could go for. Could Zustand work? Set the color value in Localstorage/as a cookie and read the value that way? Could I create a separate layout.tsx inside the dynamic route that renders alternative versions of the <Header> and <Footer> that can read the slug and fetch the article and set the color that way?

Thanks for all input :)