Changing mobile application theme colors using JavaScript during runtime

Hi All,

I created a custom theme for my application and I would like to be able to change the theme colours during runtime by either entering the colour or the hex code in. I have used CSS style classes for all containers I used in my webblocks, then I wrote some JavaScript to run alter the CSS to change the colour. For some reason the variable is being passed but my the colour of my application remains the same. Please see the attached snippet on one of my JavaScript functions. Any help would be appreciated.

Many thanks,

Elvis.

Hi, have you tried using css variables? Like this:

html {
    --main-background-color: rgba(0,0,0,.25);
}
window.onload = function() {
  setTimeout(function() {
    var html = document.getElementsByTagName('html')[0];
    html.style.cssText = "--main-background-color: red";
  }, 2000);
};