Skip to main content
flo_che
March 7, 2024
Question

Theme switch with variables

  • March 7, 2024
  • 16 replies
  • 1280 views

Hello, here is my problem:
I have 2 themes (A and B) for a button with icon and label text.
Depending on the chosen theme, the button automatically displays the A or B icon variant by using variables.

It works very well, except that if I apply an override color on the icon of theme A, this color resets if I apply theme B.

I would like this color to be preserved when I change themes.

Anyone have a solution for this?

Figma link here

This topic has been closed for replies.

16 replies

ksn
Figmate
Community Support
March 11, 2024

Hey @flo_che I personally don’t have a rec. on a solution for this. I’m not very fluent when it comes to variables

I did check with the support team, and in general, this this should work, but would need to actually look at the file into the file to be sure 😔 It looked like the above you provided is just an example. Would you be willing to share a copy of the file you’re working with? If you can’t, no worries (also, please don’t post a direct link to a copy here to protect your work).

March 12, 2024

Thank you Kim, here is link to the editable Figma.

And some screenshots of the file

ksn
Figmate
Community Support
March 13, 2024

Thanks for this! I’m going to follow up with you via DM shortly with further instructions.

March 14, 2024

Hi Kim, I did not receive the request from support team. Is it possible to use my email address that you mentioned via DM ?

Nate_G
Power Member
March 14, 2024

@flo_che I created an example file around button issues I’ve had in the past working with scaling+icons+modes, and how to fix them. Hoping this helps point you in the right direction.

→ Example Figma File

Nate G
ksn
Figmate
Community Support
March 14, 2024

Sorry about that! I just PM’d you.

March 19, 2024

Thank you Nate for your help, your example file is very complete, but doesn’t solve my problem.

Nate_G
Power Member
March 19, 2024

@Florent_Chevillard One idea is you could manage/change the icon color using color variables vs overides, which would preserve your colors when you switch modes.

→ Get Example File

Nate G
Jan-Willem_van_Veelen
June 13, 2024

Did you find a working solution?
@Nate_G your example almost works for me, but I want to use a different color icon per button state (default, hover, pressed). So multiple variables per Theme for one icon.
In my case the icon color override did not work.

Nate_G
Power Member
June 20, 2024

@Jan-Willem_van_Veelen One quick idea, you could try setting up color variables for each theme for your default, hover, pressed states and assigning those to the corresponding icons.

Nate G