I’ve created a design system with two themes, one light and one dark. When creating components the BG is reproduced on the asset page. However when I combine them to a variant the dark style components have a light BG on the asset page, meaning it is difficult to see what is what.
Got any ideas what could be the solution for this? Adding a screenshots below. To the left are variants, on the right regular components.
I just figured something out that works! You can fill the Component container with a linear fill of the two background colors, then adjust that fill’s color stops to create a hard line between the two backgrounds.
Then, arrange your variants accordingly over the appropriate background.
I couldn’t make that work for my case. I did figured out a solution as well though. Since I have two frames that contain either the light or dark version. If you set the fill for the variant to the same color as the frame it will give the desired effect.