Variables within color styles do not update when mode is swapped

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

Brand Styles within Blue Library

Brand Styles within Purple Library

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:

• I define styles using variables, e.g. the style “content-action” is defined as the variable “content-action.” This workaround is making it possible for my team to use style-applying plugins, such as Style Organizer.
  

• These variables have multiple modes. In this example, there’s a blue mode and a purple mode. The action color changes between blue and purple, depending on which mode is applied.

• If I apply the content-action variable directly to part of a text layer, swapping between modes correctly swaps the color of the text:
  

• If I apply the content-action style, swapping between modes does not swap the color:
  

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 😓

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