Unable to switch variable modes

Same for me/us. We’re using an Enterprise License and have the same disabled mode options. For us 3 out of 6 modes are disabled.

Also have the same issue, and same License

I’ve got the same issue on Enterprise but the mode is only disabled at page level, I can set it happily at frame and component level.

I’m getting the same issue with Professional licence. I would really like to know if I’m doing something wrong 🤔

Hi @Josh, thank you for your reply.
Unfortunately, after having gone through every component to ensure that all of them were using the correct variables and checking the local variables in my design system file, publishing the updates and accepting the updates in my other design file, my dark theme is still greyed out. When switching a page to a dark theme in my design system file, this works perfectly, it’s just in files that use the library.

Would you happen to have any other suggestions? I know variables are in beta so is it worth submitting a bug?

Cheers, Jack.

Hey @jackbrind sorry to hear your still running into issues here. In this case yes I would encourage you to submit a bug report with all of these details. If possible please share any screenshots, recordings, and give edit access to support-share@figma.com. Someone from our support team should be able to take a closer look from there. I’ll also ping the variables team again on this to see if there might be something we’re missing.

Here’s the form you can use.
Submit a bug form →

Thanks! 😊

For some reason the color modes are disabled when I’m trying to import color tokens from an outside library file.

It only works for me when I detach the instance of my component. I made sure to have all color variables linked to the same system and up to date. Still getting grayed out

Not solved. Most people are still having troubles with this. Ghetto software

I just created new mode but I can’t apply it on frames containing components, when I remove components from the frame, the mode becomes available. Tokens, components and interfaces are in differnt files

After submitting a bug to Figma, I have been told by one of their Technical Quality Specialists that it has been raised with the Figma Engineering team so they are actively investigating it.
It is in beta so I guess these things are expected.

Hey folks, I’ve had this issue as well and starting to investigate to what extent switching modes work element by element. I found that while libraries are connected, and all component properties are linked to variables; it doesn’t mean all libraries have been updated with the new variable changes.

I order to fix all issues, I had to update all libraries manually, then move on to my main library and import the updates. From there, the main library has new updates available, which can be distributed to files which in the end require to be able to change in mode.

Hopefully this helps.

Aka @Figma: It would be conducive to know which libraries aren’t in sync whenever updates have been submitted.

After speaking with one of Figma’s Technical Quality Specialists, it is an issue with out-of-sync libraries. It may be due to using the Tokens Studio plugin and syncing tokens with Figma but in any case, I have had to manually go through every component and make sure that all of the variables are correct. In some cases, the variable was linked to a previous version.

To identify the issue these were my steps:

1. Create a section, give it a background variable to access the modes on the layer and provide it with the mode that has the issue (in my case, Dark mode).

2. Bring in the component, or UI that has the issue and you should immediately see the components that are problematic (in my case, TextInput backgrounds)

3. In the below screenshot, you can see that when selecting background/component/default in the selection colours panel, the variable is not highlighted in the library pop-out because it is not in the current version. All I have to do is connect it (at the UI or component source) to the correct variable and the issue is resolved.

As you can see, the issue is now resolved and the TextInput now looks correct in dark mode.

I agree with @Paul65 that it would be good if Figma could better indicate where variables are linked to a library that is no longer available (i.e. an older version) as this was very hard to identify. Further to that, I don’t really understand why modes that have issues are greyed out because setting the mode on the section and then dragging UI in is a hacky workaround. I think it would be good if modes were never greyed out so we could see where the issues are and with an indicator on the issues, it would be easy to fix.

@jackbrind Thank you for elaborating on this. I totally agree with removing the disabled state and figure the inconveniences yourself. That would be way more intuitive.

Figma is so hilariously bad. fix this. let us force-update all variables to fix this. if it breaks things, that’s okay. better that than the whole ass tool being broken because of some clunky implementation on y’all’s end.

PenPot here we come.

Figured out what was causing this situation in my files.

This seems to occur when I have a library component which contains sub components which are hidden from publishing with a “.” Prefix.

If you use the parent component in your file and detach it you are left with the “.sub_component” this causes them to be out of sync and disables the mode switching.

If you select your root frame and look at the styles applied and see duplicates this is an indication you have things out of sync.

Hope this helps 😬

We’re having trouble with this too. It seems to be related to nesting components. Figma derps out completely with this. It doesn’t even show me the correct name for the mode (Light mode), just “mode 1”.

I am still facing this issue.
I created the variables for my first theme, and after a while I added a second theme.
Now I can’t change the theme because it looks disabled.
What is the point of creating variables and modes if I will have to change everything manually?

Hi. Also having this issue as well as other issues with variables. Seems very buggy right now. I’ve even deleted all frames so nothing is being references and I’m still seeing the faded out modes, and also variables that have previously been deleted. Libraries appear to be up do date. Seems to start OK with a clean file but some breaks down when I start bringing in component. Even simple ones where I know only correct variables are being used.

Hi All, i am facing a same problem here, can’t access the variable which is inside a different mode, not able to toggle the boolean value between modes.

Hello, I’m also facing the same problem. In the library file that I’m working on I added a fourth mode and it is disabled. I can’t even use it in the file where I created it…

same issue, updated all the files but the instance won’t give me the other color variables (greyed out). Even after updating everything, even if I detach an instance, I haven’t tried detaching all the components but then I would lose all my updates if I detach.

Dear Figma Support,

I’m catching the same problems as many others do/did: I’m sometimes and quite randomly unable to switch between my color themes.

BUT in my case it makes completely no sense. Because it has nothing to do with my colors! My colors are connected to my “design system color variables”. In the following video, I’m showing you two nearly identical master screens.

Within the left one, it is possible to switch themes.
Within the right one, it is not possible to switch.

It took me 8h to find a reason. And you know what? – I didn’t find one 😪

Please let me know if you guys know more. 🔎 Because I don’t get it! For me, it is essential to be able to switch between color themes.

Thanks 👋