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

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. 🙂

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.

Thank you @Gleb and sorry for the late response.
Your answer makes a lot of sense. the only thing I would wish for - and please correct me if I’m wrong - is to be able to design in dark mode. What I mean is that I would like the components to be in dark mode out of the box - so when one of the library users pulls a component into their files, they would not need to run the plug-in again and again while they work and add new components. I know that this is a bit too much to ask for and I hope that maybe one day Figma would add this as a native feature but I guess until then we will have to continue and use plug-ins.

Regarding your question about the plug-in experience we have - yes, it was with Sketch. Happy to hear that Figma handles it better (as many other feeatures…)

By the way, just started experimenting with the plug-ins. Both plug-ins you mentioned did not work as I hoped for. I’ll investigate it further but that’s an example why I wanted to avoid using plug-ins for that… I’ll keep on exploring other options but as I mentioned in my previous comment - the ideal state would be for Figma to support dark/light modes natively. Thanks again for your attention and support!

I’m going to checkout the plugin “Variant Switcher”, looks like it might solve your issue too.