We have a meteor app which we use it manage appointment bookings, feedback etc for different industry verticals. Every customer now is asking us to change the UI colors to match their brand. We have written one main.css which when changed will make the changes for all accounts created.
We have simplified the main.css to 12 attributes now. We would like to create a style for each customer and save it as a template. When the customer logs in with their credentials, the app should over-ride the main.css & apply the template saved for that particular client.
Could somebody tell us a simple way to do this, please?
If your customers are using modern browsers, you might want to look into using CSS variables.
Basically, you define your palette with a few main vars
--main-color: #abc; //default-main-color;
--secondary-color: #def; //secondary-color;
--optional-tertiary-color: var(--main-color); //inherits from main if not specified
There are obviously many other ways to do this, like custom includes, or adding classes to your elements based on the client, but this is working really well for us.
If you are using React you could check out styled components https://www.styled-components.com/ which allows you to define style based on props, so if template value passed as prop use template value, otherwise use default value.