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

1

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

2

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"
Else
  
  localStorage.applycolor = "#009933"
End If


JavaScript

root = document.documentElement;
elem = getComputedStyle(root).getPropertyValue("--varcolor");
root.style.setProperty("--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;
color:white;
background-color:var(--varcolor);
font-family : exobold;
border-left-color:var(--varcolor);
}

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.

:slight_smile:

3

This is a neat trick! Thank you for sharing!

1 Like