Question Inherit image tint color

Hey there!

Not sure if that’s a bug or a feature or if I’m simply on the wrong way...

I'd like to assign an icon-image’s tint color from the color property. To do this, I assign it in the callback of the `GeometryChangedEvent`. During runtime, I want to update the color to a specific tint color by applying a USS class. However assigning the class has no effect. Does anyone know what I’m doing wrong?

In the example below, I would expect the icon to be red initially and on clicking toggle between green and red.

UXML example

Code (UXML):

1. <engine:Button class="my-button">
2.     <engine:Image name="icon" style="--unity-image: url('/Assets/Scenes/check.svg');"/>
3. </engine:Button>

(The image is imported as a UIToolkit vector image)

USS

Code (USS):

1. .my-button {
2.     color: red;
3. }
4. .my-button.selected Image {
5.     --unity-image-tint-color: green;
6. }

C# behaviour

Code (CSharp):

1. private bool selected = false;
2.  
3. void OnEnable()
4. {
5.     VisualElement Root = GetComponent<UIDocument>().rootVisualElement;
6.  
7.     var button = Root.Q<Button>(className: "my-button");
8.     button.clicked += () => ToggleColor(button);
9.  
10.     button.RegisterCallback<GeometryChangedEvent>(e =>
11.     {
12.         if (!selected)
13.         {
14.             button.Q<Image>("icon").tintColor = button.resolvedStyle.color;
15.         }
16.     });
17. }
18.  
19. private void ToggleColor(VisualElement element)
20. {
21.     selected = !selected;
22.     if (selected)
23.     {
24.         element.AddToClassList("selected");
25.     }
26.     else
27.     {
28.         element.RemoveFromClassList("selected");
29.     }
30. }

Here is the example on github

 

Good to know. I sent the report

 

Hi Matthew, that might well be the case. Is there a way to unset any style that has been applied like this? Or also in general remove any inline styles via script?

 

Sorry to bump this, but it’s been a while now and it would be really helpful to know how to unset the inline image-tint style applied in C#. This can’t be a one-way street, can it?

 

Sorry for necro-ing this thread, but I only just found the tint property using the search function.
The documentation at Unity - Manual: USS common properties (unity3d.com) does not list

--unity-image-tint-color

as a valid option.

In addition,

-unity-background-image-tint-color

start with one dash, and the regular image tint starts with two dashes. Is the double dashed property simply a css variable that's being picked up by the component?

Looking through the Image element's source code I found additional style properties that are available, but don't seem to be documented anywhere:

Code (CSharp):

1.  
2. private static CustomStyleProperty<Texture2D> s_ImageProperty = new CustomStyleProperty<Texture2D>("--unity-image");
3. private static CustomStyleProperty<Sprite> s_SpriteProperty = new CustomStyleProperty<Sprite>("--unity-image");
4. private static CustomStyleProperty<VectorImage> s_VectorImageProperty = new CustomStyleProperty<VectorImage>("--unity-image");
5. private static CustomStyleProperty<string> s_ScaleModeProperty = new CustomStyleProperty<string>("--unity-image-size");
6. private static CustomStyleProperty<Color> s_TintColorProperty = new CustomStyleProperty<Color>("--unity-image-tint-color");

Are these subject to change since they're marked as private and shouldn't be relied on?
Thanks in advance!