-
Notifications
You must be signed in to change notification settings - Fork 676
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to load different UI configurations based on the tenant? #378
Comments
I currently have the same requirement and had no luck with radix-theme yet - see #379 |
@chrishoermann I was searching for a solution and I will probably go in this direction tailwindlabs/tailwindcss#11964 In build time generate the right theme configurations per tenant and place the output in the right server/folder. |
I have theming implemented in my app. It's a multi-faceted approach that involves a combination of dynamically importing css and objects with tailwind classes. Essentially all you need to do is get your subdomain or domain from next/headers at the root layout. Then use that to dynamically load your required theming info.
In my case getSiteData() looks like this - I have my hostname parsing function here
Colour and font tokens are set by CSS variables and called for at the root with a data attribute. Those CSS variables are also set into my tailwind.config, just like @rpfelgueiras has shown in the link he referenced. Set your data attributes on your tag. This is where you want font definitions especially
Define CSS variables
Then, tailwind classes are put into a theme-{themeName}.tsx file and applied in the site template code after dynamically importing the tailwind classes Theme file
Dynamic import. This depends on naming your files with the same values you're using in your database to identify a site's theme.
Applied in components
In my case, I'm not swapping out large chunks of JSX (yet). I'm just changing style. But there's no stopping you from having entire components conditionally render this way. It's a bit tedious to set up initially. But once the architecture is done, creating new themes is a bit less work. |
I have a Using shadcn/ui:
|
Mind sharing repo projects so far? |
I see that Hashnode is loading a different theme (or UI settings) based on the tenant.
How do I do the same?
The text was updated successfully, but these errors were encountered: