I’ve built up a pretty extensive library for my project, with hundreds of components, being used in different design files.
This library was designed so far with only one theme in mind: a light one. We are now thinking of adding a dark theme to the project. I was wondering what the best approach would be to add a new theme to our library.
Currently, I’m thinking of renaming all current main components so they can’t be found in the other design files (by adding a dot in front of the component name), and then making two copies of that component (one for the light theme, and one for the dark) then and combine those as variants. See this example:
The upside is that the structure of both variants will be exactly the same, and you would be able to switch between the light and dark variant while keeping all overrides in the design files.
The downside is that it’s going to take a really long time to restructure all components in the library, and we would then also have to replace every ‘old’ component used in the design files with the newly created variants.
Before doing this, I would like to know if this would indeed be the best approach, or if there would be a better one. Thanks in advance.
1 Like
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!
1 Like
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
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
