Figma Support Forum

How do you support light and dark mode in your design system?

Currently, our design system contains components for light mode, and my team is working on adding support for dark mode as well. We decided to include a copy of each of the components in its dark mode design, and have a toggle for an easy change between the states.

The thing is, this means we need to manually maintain a duplicate copy (we prefer not to nest the light mode as a new variant inside the dark mode as the overrides will not be carried over), and overall it doesn’t look that efficient.
I checked the plug-ins out there and there are some really good ones but I couldn’t find something that will work with external styles (i.e. our design library) while still give us the control we need.
I was wondering how are you doing it in the libraries you manage.

There are plenty of plugins for this that work with external libraries. One of them is called Appearance. Themer also would work, but it’s a bit more complex.

Thanks @Gleb, I do agree that there are some awesome plugins out there and I did check the ones you mentioned in your comment but unfortunately could not find anything that will answer our needs.

Another thing, relying on a plug-in in a production environment is not always a best practice: it happened before that we structured our library in a certain way so we could use a certain plug-in, and after a couple of months the creator of the plug-in stopped updating it, resulting in a large effort to refactor some areas of the library. That’s the reason I am looking for ways to support light/dark mode with Figma’s built-in features.

What are your needs in this case? The plugins are mentioned both work with external libraries, which seems to be the only limiting request that you have. By the way, Appearance is made and used by one of the largest tech companies in Russia. :slight_smile:

Regarding your issue with updates: did it happen in Figma or Sketch? I don’t think this should ever happen with Figma plugins because all plugins API updates so far are non-breaking, meaning that even if Figma adds new functionality, the plugins won’t stop working. The only case where what you are describing could happen is if there is a big change to how one of the plugins works or the plugin gets removed entirely, but you can always find alternatives that would work in a similar way. Even for Appearance plugin, since it’s pretty basic. And it’s a great plugin for this case because you don’t need to set up your libraries in any special way to make it work.

I’m afraid there are not really any options to do what you want without plugins in a scalable and effortless way.