Theme switch with variables

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).

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

And some screenshots of the file

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

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

@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

Sorry about that! I just PM’d you.

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

@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

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.

@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.

Thanks @Nate_G for the suggestion. I tried this set-up, but it seems that after Figma changes the icon-version, it does not apply the icon-color variable. Maybe applying the variables happens in the wrong order, so first color change, then icon-variant (that is then in it’s default color). I’ll keep digging into it and will let you know if/when I figure out a solution.

We currently have the same problem for our design system. Have you perhaps found a solution for this?

Hello @V_Verena, unfortunately no, i didn’t found a solution for rhe moment. 😔

Hi,

I am experiencing the same issue with our icon library. Some colour overwrites got ignored when another mode is applied. I created a file to illustrate our issue, where you can play around.

Figma color variable overwrite got ignored when changing modes.fig (94.1 KB)

Hey everyone - from what I understand on my end, these need to be reviewed by our support team on an individual basis. Apologies that I can’t assist further at this time.

I’d recommend anyone who is having issue with these inconsistencies file a ticket here: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374

I’m also having this issue, where, when you move a component from Theme A frame to Theme B frame, something such as a nested button component will revert to default state and doesn’t maintain any overrides (e.g. label text, rounded corners)