DEV Community

Georg Müller
Georg Müller

Posted on

Branding a multitenated application using CSS

A friend of mine had an interesting challenge. He wanted to have a public part of an B2B application brandable in the color of its customers and asked me how I would do it. This post describes what I told him.

The application basically is a simple form and a summary describing the data the user will submit.

Base setup in the CSS

Use CSS variables for the colors and use them consistently where you want the brands colors to be applied.

Enter fullscreen mode Exit fullscreen mode

I this case I created a themable button:

button {
  background-color: var(--brand-color-1);
  border-color: var(--brand-color-2);
  color: var(--brand-color-2);
  border-radius: 3.5rem;
  border-style: solid;

  padding: 6px 10px 6px 10px;
Enter fullscreen mode Exit fullscreen mode

Looks like this: Button with blue background

Use CSS inheritance to override the color

In CSS properties are inherited from the root element to its child elements.
In this case I would override it on body as I would like to have all elements using the overridden colors, eg like this:

<body style="--brand-color-1: #48BB78">
Enter fullscreen mode Exit fullscreen mode

Button with green background

Now you can override the color on the html using your web framework of choice.

If you are rendering on the server you should be aware of caching. You would probably like to cache by tenant and make sure you invalidate when changing the colors, but that is out of scope for this post.

If you want to play around with this solution I made a codepen:


This is a solution by a backend developer :-). Do you know of a better solution?

Top comments (0)