Switching CSS at startup

I wonder whether it’s possible to switch CSS when a published project loads?

I have a project that is used by several clients and have created a style style sheet that tweaks the colours in the project for each.

At the moment, I have some JS on the first scene that switches the style sheet by reading a queryString parameter in the URL. This works well except the body background colour doesn’t change until the CSS is loaded.

I tried moving the JS to the HTML but it keeps loading the loading the default CSS even if I hard code a different style.

Also. is it possible to set the preloader colours with CSS?


Hi mackavi,

Can you please share a sample project package so that we can better understand what you want to do?


Hi Toan,

I solved the first part. It needed two steps not one. I had to add a style sheet to handle the BODY colour and then replace Saola’s style sheet to switch colours within the rest of the project.

Here is a simplified example:



The source is here:

theme.saolapack (3.8 KB)

And then I add two CSS files in the output directory called light.css and dark.css with the colour for each:

body {
background-color: #045944;

The second part of my question is whether I can now format the preloader?

I found a class called loader-backgound but nothing for the spinner and percentage loaded text.


Hi mackavi,

It’s not possible to set the preloader color with CSS.
However, you can handle Start event of the custom preloader to change the color with JS:

var hexColor =  '#FF0000'; // you can use JS to get color from the theme
if (doc.loadingIndicator)
  doc.loadingIndicator.setColor(hexColor); // this function only accepts hex color string


Thanks, that works perfectly.