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:
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.
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 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”
