Dark & Light theme for library components

Hi Figma,

In our business, we’re using a Light theme library for different business units.

Some of these business units wish to switch to a dark theme but still use the same components. I want to hear of anyone who has experience creating a dark theme and what’s the best way to do this in Figma.

I see 2 options.

  1. Copy / Paste the current light theme library. Register it as a dark theme, change the colors to dark. But then I have I manage 2 assets and libraries.
  2. Only use one library and create a new variant for all components called “Dark theme”.

Or do you have a better suggestion to the best approte

Option 3:
Create a new file with dark style only (0 components, style name 1:1 match to light), publish it, instantiate ◇s from your main library to design files like you normally would, use Themer plugin to style all ◇s to dark via a single click of a button.

Option 4: (Biscuit recommendation :1st_place_medal:)
Now with Figma’s new Swap library feature in place, create a new file with dark style only (0 components, style name 1:1 match to light), publish it, duplicate the main library and name it with a dark suffix, ⌥3 then click what’s under Used in this file section, click Swap library located :arrow_lower_right:︎ corner, click the drop-down menu located :arrow_upper_right:︎ corner, choose your library duplication with the dark suffix, hit Swap library located :arrow_lower_right:︎ corner, publish this library and it’s ready for use.

Later when your main library is modified, you can simply duplicate the main library and repeat the second half of these steps

I might make a video walkthrough of these 4 options, along with each of their respective pros and cons have I the time :hugs:

5 Likes

Thanks!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.