What's your current go-to approach for creating Light & Dark mode?

Hey all :wave:

Ever since variables have been released, I’ve been working extensively with them, especially for creating Light & Dark themes. What I really can’t wrap my head around just yet though is how to simplify my component structure even further. Ideally, I’d like to get rid of my “Dark Mode=True/False” property entirely and only have one single themed version of everything that themes itself by selecting the desired mode.

So here’s what I usually do:

  • I create the component and assign all necessary variables (in Light Mode)
  • The component itself and its variants will be set to mode “Auto”, so are all nested components. By doing so I can inherit the parent layer’s mode when instancing the component in my designs. This works flawlessly and already saves a ton of time.

Where it becomes tricky are all those (sub)components which cannot use variables, for example if they make use of background blurs. For all of them I still need to create Light & Dark variants, which means I still have to have my Dark Mode switch on all/most of my components, even though the rest of the component switches its theme automatically – just not the parts of the component that cannot use variables.

This complicates the process a bit, because when creating the Dark Mode designs, it’s just not enough to switch the mode on the most outer frame, but I also have to go through the layers list, select those that need variant switching and toggle them to Dark Mode too. This can be a tedious task and you can easily miss a layer.

So my question is: Do I miss something here, conceptually? I’d really like to see how you approach and solve this :blush:

It looks like Figma’s feature for doing this is via color variables. More here: Figma Color Variable: Creating Dynamic Designs with Dark and Light Modes | by Soumya Ranjan | Medium

1 Like

Thank you for your reply, Mike (and sorry for mine being so late haha). I actually figured it out a while ago already how to leverage variables to swap components with different modes.

I am leaving this here in case anyone is interested in the process: