Next.js Discord

Discord Forum

Rendering different themes based on different domains using NextJS & Tailwind

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I need to implement themes switching based on domain change sing NextJS and tailwind css. The theme should dynamically update based on domain change.
The content and functionality of the page is same, only the css background and fonts will change. Looking for help in approaching this usecase.

4 Replies

Scale parasitoid
Do you mean like changing subdomains change the fonts and such ?
Transvaal lionOP
Yes right
Thrianta
How often is a user changing subdomains? I wonder if you could use a server component in your root layout which uses headers() (you are using nextjs app router right?) to read the URL and sets your default theme accordingly.

// app/layout.tsx
import {headers} from "next/headers"  

const host = headers()
console.log(host) // "my-alternate-subdomain.my-website.com"
const hasAlternateTheme = host.startsWith("my-alternate-subdomain")

return (
  <div>
    <ThemeProvider defaultTheme={hasAlternateTheme ? "alterante" : "default"}>
      {children}
    </ThemeProvider>
  </div>
)
Scale parasitoid
you can use middleware and rewrites