Question Is It Possible to Tint an Image using CSS?

Is it possible to tint an image via the uss file?
Not a "background-image"; An Image.

Thanks

 

You can do it with the uss variable

--unity-image-tint-color

. It has to be set on the image; it doesn't work if it's set on a parent.

 

Hi !
Thanks for trying.
That doesn't appear to work.
I'll make mention that I'll currently evaluating UI Toolkit in 2019.4 LTS
Perhaps it works in later versions.

What I have is a VisualElement of class ClickableIcon that inherits from Image ..

What I'm finding I have to do is set the image tintColor directly in C#
My working implementation requires a bit of boilerplate

Code (CSharp):

1.  
2.        
3.        private  readonly CustomStyleProperty<Color> _colorPropertyStandard =
4.             new CustomStyleProperty<Color>("--clickable-icon-standard");
5.  
6.         private  readonly CustomStyleProperty<Color> _colorPropertyHover =
7.             new CustomStyleProperty<Color>("--clickable-icon-hover");
8.      
9.         private  readonly CustomStyleProperty<Color> _colorPropertyActive =
10.             new CustomStyleProperty<Color>("--clickable-icon-active");
11.  
12.         private Color _standardColor;
13.         private Color _hoverColor;
14.         private Color _activeColor;
15.      
16.          public ClickableIcon(Texture icon, Action action, Vector2 size = default)
17.         {
18.                   // *** constructor stuff ***
19.              RegisterCallback<CustomStyleResolvedEvent>(OnCustomStyleResolved);
20.  
21.         }
22.      
23.         private void OnCustomStyleResolved(CustomStyleResolvedEvent evt)
24.         {
25.             evt.customStyle.TryGetValue(_colorPropertyStandard, out _standardColor);
26.             evt.customStyle.TryGetValue(_colorPropertyHover, out _hoverColor);
27.             evt.customStyle.TryGetValue(_colorPropertyActive, out _activeColor);
28.             tintColor = _standardColor;
29.         }
30.  
31.         private void OnMouseOver(MouseOverEvent evt) => tintColor = _hoverColor;
32.         private void OnMouseOut(MouseOutEvent evt) => tintColor = _standardColor;
33.         private void OnMouseDown(MouseDownEvent evt) => tintColor = _activeColor;
34.        

And in the USS:

Code (CSharp):

1. ClickableIcon {
2.     --clickable-icon-standard: #a1a1d0;
3.     --clickable-icon-hover: #9a5566;
4.     --clickable-icon-active: #7b9a55;
5. }

It works, but it seems cumbersome and I haven't got the MouseDown bit working yet ...

Thanks again for trying

 

I can assure you it works in later versions. :/ 2019.4 was a long long time ago. Your work around seems nice enough : ).