Project CSS - changing colours universally at runtime (using a value retrieved from a webservice or by user choice (e.g.))

Is it possible to put code into the Project CSS that will pick up runtime variables and apply to the project as a whole?

It is possible ! :slight_smile:

In my main project code I’ve put this:-

If IsNull(localStorage.colortheme) Then localStorage.colortheme = 1

If localStorage.colortheme = 1 Then
  localStorage.applycolor = "#ff0000"
  localStorage.applycolor = "#009933"
End If


root = document.documentElement;
elem = getComputedStyle(root).getPropertyValue("--varcolor");"--varcolor",localStorage.applycolor );
End JavaScript

and in the ProjectCSS I have this :-1:

.dialog-buttonbar {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

 .dialog-buttonNoBorder:first-child {
border-bottom-left-radius: 15px;


 .dialog-buttonNoBorder:last-child {
border-bottom-right-radius: 15px;

.dialog-buttonNoBorder {
color:var(--varcolor) !important;
font-weight: bold !important;


.dialog-buttonNoBorder:hover {
background-color:var(--varcolor) !important;
/*background-color:#EDEDED !important;*/

.dialog-header {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom: solid #00355C 1px;
text-align: center;
padding: 10px 16px 6px 16px;
font-family : exobold;

So ultimately i can set the localStorage.colortheme to a value (either on the app or retrieved through a webservice and my code in the project code will then set the variable color and hey presto.


This is a neat trick! Thank you for sharing!

1 Like