is there a way to link a tag (string tag with hex color as string) to CSS element ie border-color: tag([default]color/high) Or can you script that tag to update style element on change?
A simple binding should do it.
I am talking about changing the CSS Styles, not the component style properties on a view
this example does not work / just for illustration
Well then, no you can't.
What are you trying to achieve ? It looks like you're going in the wrong direction.
I want to be able to change the color of several style elements without having to go into the style and change each one.
No, you can't create a binding on a CSS style. The browser will load the CSS stylesheet with the Ignition Perspective page and it won't be updated unless a complete refresh is done
The way to do this is create your two style classes with styling as required. Then ...
... add a binding to the component's PROPS.style.classes and get that to select the appropriate style class based on the tag value.
I get what you are doing there, but for example...
I have styles
borderFault - border color red
textFault - text red
backgroundFault - background red
those styles are used on several different pages and are called similar to what you show.
However new install wants a different color for Fault (purple) I want to be able to change all those "red" to purple without having to go into each style and change them manually / make sure they all get changed to same value.
Its fine if clients need to restart after change as this not be a frequent change.
I think scripting to write to the CSS would work I just haven't seen any way to do it
There is no supported way to make the Style Resources dynamic.
Don't use hard coded colors, instead use CSS variables provided by your own theme in either the CSS spreadsheet or a Theme provided to Ignition.
Then you can use var(YourColorVariable) for your colors.
This way a new client wants different colors, you modify your theme and everything is modified automagically.
More information here:
2 Likes
There's one "right" answer for this: themes.
If you can't use themes, you can hack something with the stylesheet.
1 Like
+1 to custom themes. Create a custom theme with variable names and just update those variables as needed for individual project requirements.