Having light/dark pages but not using theming

[AnzeKop]

This sounds like a very wierd title but we have a website where half of our pages are light theme and half are dark and we don't let the user swap between them.

In the pages router we were able to call getStaticProps and return a theme prop: 'light' or 'dark' which could be picked up by the root _app.tsx layout to add the 'dark' class to the wrapping dive all while staying on the server and avoiding any on screen flash.

we're moving to the app router and I'm starting to realise this isn't possible anymore. The only idea I've had so far is seperating it two folders (light), (dark) and then having seperate layout.tsx files but this seems like a wierd approach.

Does anyone have any recommendations here?

As context, we are using Payload CMS, Tailwind, ShadCn

[icyJoseph]

The only idea I've had so far is seperating it two folders (light), (dark) and then having seperate layout.tsx files but this seems like a wierd approach.

Why weird? The layout file can be different, but make use of the same component, with a different prop, as you do in getStaticProps...

Anyway, how is it decided which one should be dark or light mode? Is it driven by the CMS?

[AnzeKop]

Seems like it causes unnecasry seperation but yes, it isnt the worst solution.

Its determined by a prop if the page is made by the cms or for hardcoded pages we just returned the theme prop in getStaticProps in the pages router before