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:
When applying the style to a layer, the layer displays the correct purple mode, but does not match the style selection:
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.
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:
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.