Variables within color styles do not update when mode is swapped

I’ve adjusted all the color styles in my document to use new color variables. When I swap my page to another mode, layers in my designs reflect the selected mode, however the color styles still reflect the default mode. This is confusing, as layers using those color styles appear as a different color than displayed in the color styles list.

In this example, the secondary palette has two modes, blue and purple. The purple mode has been selected for the page.

A variable is used to define a color style. The style and variable are both displaying the blue mode, even though the page is set to purple mode:
Screenshot 2023-06-26 at 11.43.10 AM

When applying the style to a layer, the layer displays the correct purple mode, but does not match the style selection:
Screenshot 2023-06-26 at 11.42.54 AM


When you add in your color variables you need to set the different modes as seen in the screenshot below

From there you apply that variable to a style

And then on each page or frame, you can specify which mode

Right, that’s exactly what I did. The issue is the selected mode is not reflected in the styles, so any layers the style is applied to don’t match the listed style.

In your example, I would expect the “Heading” color style to appear white (Primary Dark), however in your screenshot it is displaying as black (Primary Light).

As there’s no way to select a mode when applying a variable to a style, the expectation is for the style to reflect the page’s selected mode.


I’m not sure I’m following. Do you have a link you could share?

I made a quick video to describe what I had done as well if this is helpful.

Ok, after watching your video, the main difference in what I’m doing is I’m trying to make mode-specific styles. I currently have separate style libraries, one for each of our company’s two brand palettes. In the future, I’ll want to merge those into a single library with two modes, but in the meantime I’m applying some new, global variables to both style libraries.

Global Library
Screenshot 2023-06-26 at 2.18.46 PM

Brand Styles within Blue Library
Screenshot 2023-06-26 at 2.19.54 PM

Brand Styles within Purple Library
Screenshot 2023-06-26 at 2.21.30 PM

As you can see, the variables and styles are appearing blue within the Purple Library, even though the current page I’m looking at is set to purple mode. If I apply the Purple Library’s brand styles to layers in my design, they appear purple as expected.

As there’s no way to directly associate modes with styles, my expectation would be for the style appearance in the panel to change based on the currently selected mode.


I’ve also found another issue on this topic:

1 Like

Also running into this. We have a set of light mode styles and another set of dark mode styles. Since we’re switching to using variables, connecting the styles to the variables is useless if we cannot set the variable mode in the style. It seems as if connecting styles to variables is useless in general. I think we’re just going to move the styles to a separate archived file and ask everyone to stop using them. Would love to hear other solutions tho

My QC colleague found the same bug. I have brown and green modes, using styles and the new mode color don’t change accordingly, gotta delete all styles and run “apply variables” plugin to attach styles to variables and that works.

I have another problem with variables:
My way of working is to use a section in which all screens should inherit the theme that I set for the whole section (that way I can copy & paste screens to quickly theme the whole flow).

HOWEVER since yesterday I have the following issue:

Layers within the component (seemingly randomly) have different themes assigned - EVEN though set on Auto. In this example: the component has “Dark” Theme assigned but as you can see in the screenshot the nested layer claims to be “Light” even though its set to “auto”

I need some help here :sweat:

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.