I just realized that Webflow doesn’t support mode-aware referencing between variables, so semantic variables don’t update dynamically based on the mode of the primitive they reference.
For instance, I have two variable collections: Theme and Color. Color has primitive variables like “color-blue-10” that have light and dark modes. Theme has semantic variables like “accent-solid-hover” that refer to “color-blue-10.” But when I use variables from Theme, it doesn’t recognize the modes in Color.
Figma has this capability, but Webflow does not. Anyone run into this?
When working with variable aliasing across collections, there’s an important limitation to note: variables can only reference the base mode value of the source collection, regardless of which mode you’re aliasing from.
Let’s say you have a “Palette” collection with a “Main Color” variable:
Base mode: #000
Dark mode: #fff
If you create a “Body Copy Color” variable in another collection and alias it to the “Main Color” variable from the Palette collection, it will always receive the base mode value (#000). This happens even if you’re trying to alias from the Dark mode.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.