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.
:root{
--brand-color-1:rgb(66,153,225);
--brand-color-2:rgb(255,255,255);
}
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;
}
Looks like this: 
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">
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:
Concluding
This is a solution by a backend developer :-). Do you know of a better solution?
Top comments (0)