Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be easily switched and applied across your site. This means fewer variables to create and manage, and significantly more efficient design workflows —from creating responsive designs across devices to applying different themes throughout your site.
There’s a serious bug with the new Variable Modes where they just get deleted for apparently no reason (and can’t be restored via backup). I’ve had it happen a few times now. At first I just gaslighted myself into thinking I was remembering it wrong. Sadly, I’ve now lost quite a few hours of work due to this - this last time all my brand color modes were deleted (I had 6 of them, each with multiple variables )
How it looks like:
when the color mode gets deleted, it leaves behind a “ghost” broken reference in any places it was used, see attached image.
the broken mode name is something like: mode-1820e512-22cd-d61c-cce9-24e52a6545ee
I can’t reproduce this reliably. Each time it happened, one minute it was working fine, then the next I refreshed the Designer and all my brand colors were gone. Opened up the Library to see modes were all removed.
Things I’ve tried:
restoring a backup does not work.
Things to note:
seems like the modes are there but somehow can’t be accessed anymore. In one of the previous times this happened, I got a weird bug where If I created a new mode with the same name as the old one, I get the old values of the variables instead of the new ones. But I’m not 100% on this.
Hey, yes, I have the same problem. Also it seems like you can’t move variables between collections anymore. It was working fine before, and I could move any variable from one collection to another, but now it’s not working. It doesn’t even give the option to do so. This functionality is really important. I’m not sure if it’s an issue on my side or a bug in Webflow.
Because of the launch of Variable Modes, the variables setup is much cleaner, which is excellent! So, those old variables were removed.
However, I find that some deleted variables will stay in the CSS no matter how I re-save or publish. This issue happens to those newly created variables that are not even used as well. Such deleted variables look like this in the CSS:
:root {
--_sizes---richtext--test\<deleted\|variable-50454f7f-70a9-3a34-58cd-f2d574364c9f\>: 0px;
}
@media screen and (max-width: 991px) {
body {
--_sizes---richtext--test\<deleted\|variable-50454f7f-70a9-3a34-58cd-f2d574364c9f\>: 0px;
}
}
// and in each media queries...
I have reached out to their support so many times about these issues… it happens with classes too. I used the API app to remove the styles, but it doesn’t work at all for Variables. I’m at a stump too.
Hmmmm, I noticed that on some of my other sites. On my oldest site I just discovered that there are shared library, and site-specific, components that were never deleted, despite me deleting them. I’ve just reached out to their support to make sure they’re aware of this, since the API playground won’t let me delete them.
