Skip to main content

Hi! I’m creating a design system and building a Figma library for it. I can’t seem to find any info on how to handle ‘inverted’ color situations. I don’t mean a system-wide or application-wide dark mode, I just mean when components are placed on darker backgrounds within an otherwise light-mode context.


I’ve seen other design systems include it in their documentation (e.g. use the inverted color variant when a button when placed on a strong background), but I rarely see anyone doing it in Figma, be it in the Variables or the Components.


Is everyone just switching modes on the frame level to handle these cases? Is that bad practice when it comes to collaboration with dev? Should I be making inverted variants for my components? This would basically double the number of variants…help!


I currently have inverted color tokens as part of my light mode token set. But this basically doubles my tokens.


Creating inverted variants for your components is a good approach, even if it means doubling the number of variants. This method improves clarity and ensures that your designs are versatile for different backgrounds. It’s much cleaner than switching modes at the frame level, which can complicate collaboration with developers. Keeping your design system organized and clear will help everyone use it effectively.

Also Check this : https://visit.github.com/shoelace-style/shoelace/issues/381

I’m interested in doing the same, but also something that scales across multiple themes.


The way I’ve got my variables setup now is to have a Primitives Collection, holding all basic colors, and a Theme collection that I use to switch themes.

I have variables setup for text colors and surface/layers color.


I’d like to find a way to add a mode that would allow me to have an “inverted mode” for example when having a dark card with light text in the light theme.


My current thinking is to have the theme mode be the master theme switcher but have an “inverted mode” that can be applied per frame and would invert all colors. But I’ve not found yet a good way to do that that scales across multiple themes (it does work with light and dark only though). Has anyone solved this issue elegantly?

Reply


Terms & ConditionsCookie settings