What is the best approach for building a library with a light and dark theme, using variants?

Hi Thomas,

If your organization allows the use of plugins, one very simple way would be to use something like Lights. You wouldn’t need to create any Dark mode version of your components, only switch modes in your final designs (and document color pairs).

Otherwise I think the approach your are describing is the only one. Test it to confirm but I think your links to old components will be preserved.

Good luck!

Hey @ThomasD, this is an awesome question. I recognize I’m replying late to your thread (over a year since you posted!) but wanted to throw in my two cents as I think this continues to come up a lot.

First, when you wrote this post we did not yet have component properties! The introduction of this feature means using base components in UI libraries is no longer necessary. That doesn’t mean bases aren’t still useful! They’re great in local files. I’ve written about this in more detail on my blog. I’d urge folks to remove them from their component libraries. They end up adding bulk to your components and confuse component users. Many of the gains component library maintainers saw in their workflows of keeping components up to date have been addressed by the new component props feature (e.g. the. select same layer cross-hair).

Second your point about the structure remaining the same between light and dark mode is an attractive reason to use variants, but I’d urge you to consider the following consequences and alternatives:

• Your variant sets that you add a theming prop to will be doubled. If you have some already-bulky component sets, this could result in a major hit to resource use, and subsequently, performance, in both your library and local files.
• Figma’s library swapping feature was made with theming in mind! If your dark mode is truly dark mode and not just an “inverted” color theming (Brad Frost has written a great blog post about inverted VS dark mode), then I imagine designers wouldn’t need such fast access to theming in the same file (though, this is assuming you’re not representing the same pages/experiences in light VS dark mode in local files… this may not be the case!)
  • Relatedly, if you make “theme” a property, you’ll need to choose a default. Now, maybe the light mode is the default that all designers start their work in! But if that’s not the case, like, if there are circumstances where designers want only design for dark mode and do that from the beginning, they’ll have to turn every component to “dark mode.” That could add up to a lot of clicks and potential frustration.

If you end up seeing this message I’d be interested to know what you ended up deciding, and how things have been going for you!

As others already mentioned, doubling your variants could have performance implications.

They way we did is to publish two versions of the same file, light and dark. We have colour styles as team libraries and when it is time to publish I would make a copy of my source file (light theme) and then I would swap light colours with dark ones. To upgrade a design file you would simply swap old dark mode file with a new one.

Works fine so far