Over-riding Main.Css

[cxoncloud]

Hello champs,

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?

Thanks in advance.
Dev Team
CXONCLOUD

[jymbob]

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

…then you use these vars in your CSS file

body {
  color: var(--main-color);
}
h1, h2, h3, h4 {
  color: var(--secondary-color);
}

…then you can use javascript to override these wherever you’re setting up the file.

if (client == 'santa') {
  document.body.style.setProperty('--main-color', 'red');
  document.body.style.setProperty('--secondary-color', 'black');
  document.body.style.setProperty('--optional-tertiary-color', 'gold');
}

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.

NB: If you’re using SASS/SCSS and want to implement something like this you might want to look at https://github.com/malyw/css-vars

[globalise]

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.