I would like to have a component called “Icon Wrapper” which is able to change the size and color (bright or dark), so I don’t have to create multiple variants for each icon.
The component itself works great until i use the wrapper as a child in other components, in my case the “Screen” Component. At some point it seems to be acting randomly:
Here is the link to the Figma project.
I hope someone can explain the behavior to me. Is this a bug or a mistake on my side?
Thank you very much!
@Maurice I’ve had similar issues swapping and maintaining colors, but one simple fix I found has been to use modes to toggle between light and dark.
So in the example below:
- I set up 2 color variables with different colors for light and dark modes (icon-color, bg-color).
- I set the different icons’ fills to the “icon-color”
- I set the fill of the “Screen” component to “bg-color”
- Then on an instance of “Screen”, I can toggle the modes between light and dark.
→ Get the file
@Nate_G Nice, thank you very much for the precise answer .
I also think that variables and modes are the best way to handle it. But if we have gradients instead of simple colors, variables can’t be applied here (currently).
I want to understand how components and the swapping mechanism work here which leads to such a behavior. Or is this a bug in Figma?