Next.js Discord

Discord Forum

Whats The Proper Way of Handling a Theme/Layout Selection on a Static Website

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Hi! I have a website that renders static pages and serves them to users. I now added a theme to the website and would like to have a toggle button that permanently switches between themes.

What I'm doing is currently not very elegant but it works (css omitted for brevity), There is a css switch that loads different CSS classes like this
//layout.tsx
export default function RootLayout({ children }: LayoutProps) {
  return (
    <html
      lang={siteMetadata.language}
      suppressHydrationWarning
    >
      <body>
        <div>
          <ThemeWrapper>
            <main>{children}</main>
            <Footer />
          </ThemeWrapper>
        </div>
      </body>
    </html>
  )
}
//ThemeWrapper.tsx
'use client'
import { isNewTheme } from '../app/utils/themeUtils'

export function ThemeWrapper({ children }: { children: React.ReactNode }) {
  return <div data-theme={isNewTheme() ? 'new-theme' : undefined}>{children}</div>
}

And I also have some theme specific components
//app/page.tsx
'use client'

import Main from './Main'
import MainAlt from './MainAlt'
import { isNewTheme } from './utils/themeUtils'

export default function Page() {
  return (
      {isNewTheme ? <MainAlt /> : <Main />}
  )
}

While this works, this doesnt behave nicely with SSR. If a user has selected the new theme then the webpage is first returned as the original and then switches to the new version with a noticeable repaint.

What would be the correct way of handling this instead? With a middleware?

4 Replies

LuisLl
Are the alternate components the same but with different styles?
LuisLl
You could try to do this: this has different classes that modify the variables that your components are using. Each class has its dark variant to override the theme when dark mode is enabled.

If you have a fully static site then you might not want to use cookies to store the data since it’ll opt you in dynamic rendering, but you could use local storage instead

https://ouassim.tech/notes/how-to-add-a-theme-selector-to-your-nextjs-app/
@LuisLl Are the alternate components the same but with different styles?
Brown bearOP
No, the alternate components are actually different sadly. I know it's not ideal but if possible I'd like to avoid restructuring the page
Is there a way to serve a different static page under the same url with middlewares?