I set 4 color themes (variable modes) for my design in local variables but when I’m trying to switch them, 3 color themes are greyed out in the dropdown. Is it a bug or I’ve done something wrong?
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.
4 Likes
Also have the same issue, and same License
1 Like
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.
1 Like
I’m getting the same issue with Professional licence. I would really like to know if I’m doing something wrong 
1 Like
Hey all this could be due to the variables in your selection being on different versions with one version having access to fewer modes than the other one. If you update everything (variable collections, and make sure components using variables are published with the latest variable version), then all modes should become available for use.
Hope this helps. 
1 Like
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.
1 Like
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! 
1 Like
For some reason the color modes are disabled when I’m trying to import color tokens from an outside library file.
1 Like
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
3 Likes
Not solved. Most people are still having troubles with this. Ghetto software
5 Likes
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
2 Likes
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.
2 Likes
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.
2 Likes
Aka @Figma: It would be conducive to know which libraries aren’t in sync whenever updates have been submitted.
1 Like
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:
-
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).
-
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)
- 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.
3 Likes
@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.
1 Like
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 
1 Like
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”.
2 Likes