DEV Community

Discussion on: Dynamic Brand theming using CSS variables

Collapse
 
wireless25 profile image
Stephan Simonett

I have to do something similar, but instead of having user-generated themes, I'm building an app that different companies will use. We'll host one instance of the app and load the config depending on the request URL. With CNAMEs, we'll point the company domains to the same app instance on the server. Like this, it's easy to have a dedicated config per company. For the theming, I want to go the same as you explained here. The config will hold values for brand-specific colors, image URLs from the CDN, and whatnot. Then use setProperty client-side to populate the CSS variables with the values from the config. Pretty neat, and nice to know other people do it the same way 😅

Collapse
 
mathumitha profile image
mathumitha

Hey, This is nice. Asking this out of curiosity. Are you maintaining any app server which serves the configuration or you are using any lambda function which will return the configuration?

Collapse
 
wireless25 profile image
Stephan Simonett

We run a Nuxt app on a server cause we need SSR for authentication. This way, I can use the serverMiddleware Nuxt provides. This is basically the node process the Nuxt app itself is running on, so no need for an additional server, pretty nice. Nuxt docs

The config is not that fancy, just some values for colors, some translation strings, and some image paths. I "hard code" this as an object directly in my endpoint in the serverMiddleware. If this scales, like more complexity or more companies (now only 3), I will maybe externalize the config, but for now, this is perfectly fine.

Thread Thread
 
mathumitha profile image
mathumitha

That's awesome 👍