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

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!

2 Likes