Getting CSS Variable Value from a System Property for Service Portal Theme

[Jim Coyne]

Was just wondering if it's possible somehow to pull in a System Property and use it in the CSS variables field on a Theme record:

So instead of "hardcoding" the primary color with "$navbar-inverse-bg: #293e40 !default;", can the value be pulled from a System Property instead?  Would be handy for using the same color setup in the "css.$navpage-header-divider-color" System Property so the Portal banner can be the same color as the strip color in the regular UI:

Useful for telling which instance you are looking at. Right now we have all 4 instance colors in the record and just comment/uncomment the proper one, but it's a pain whenever you make a change to the Theme record, you have to remember to comment/uncomment after you commit an update set.  At least we have a Clone Data Preserver for when we perform a clone.

Already tried setting a System Property called "css.$navbar-inverse-bg" but that did not work unfortunately.

[Satyanarayana C]

Hi,

As far as I am aware of, it is not possible to use a system property in the CSS Variables field on a theme record.

Thanks

[Jim Coyne · Accepted solution]

What we ended up doing is modifying the Header | Footer record we use as our Header.  We added a "style" tag in the first line of the "Body HTML template" field to override the class:

<nav style="background-color:{{::data.bannerBackgroundColor}}" class="navbar navbar-inverse" ng-class="::{'navbar':!isViewNative, 'is-native': isViewNative}" role="navigation">

"data.bannerBackground" is set from a System Property in the "Server script" field:

//Portal banner background color
data.bannerBackgroundColor = gs.getProperty("css.$navbar-inverse-bg");