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

Jan-Willem_van_Veelen
June 24, 2024

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.

V_Verena
September 16, 2024

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

flo_che
flo_cheAuthor
September 16, 2024

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

Dieter
New Member
September 17, 2024

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)

ksn
Figmate
Community Support
September 18, 2024

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

Dan_Flynn
New Participant
October 2, 2024

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)