Light & dark mode for themes variables

Great question!

You could set them up as you describe:

• Collection 1: Light/Dark
  • Mode: Light
  • Mode: Dark
• Collection 2: Themes
  • Mode: Purple
  • Mode: Red
  • Mode: Green

While your approach is technically feasible and will work, I want to outline some of the design concerns. This approach implies that all of your themes use the exact same values for their light and dark mode variable values.

This might make sense for something like a default text color or overall background color. But what happens when the theme doesn’t completely jive with the mode? If you have a very light-colored theme you might need to invert the text color or adjust secondary colors to ensure enough contrast for accessibility. Maybe your theme has cool neutral colors but the default dark mode uses warm neutral colors, what then?

This is a common situation for many teams and there is an upcoming improvement, announced at Config, that will make this easier to accomplish.

In the meantime, if you want to prepare for that flexibility in the future, the best thing to do would be to have a single collection and ‘flatten’ the modes for each theme/light/dark combo. For example:

• Main Collection:
  • Mode: Purple-Light
  • Mode: Purple-Dark
  • Mode: Red-Light
  • Mode: Red-Dark
  • Etc…

Yes this is more manual work. If the values between your light and dark modes don’t change much, you will still need to set them for every ‘flattened’ mode. For most teams these values don’t change often, so this should be a one-time operation. When the collections improvement lands, you’ll be able to extract/collapse these flattened modes into separate collections where you can set light/dark theme-specific values to your hearts content.

In summary:
If your light/dark mode variables are truly separate from your themes variables… then your strategy would work. Again, I haven’t seen many scenarios where this is the case but you would know better if this works for you.

If you think your themes need different values for shared variables based on their light or dark mode, like backgrounds or accent colors, then you’re better off going with the ‘flattened’ approach outlined above. This is more work to maintain right now but will help with future migration.

@adispezio Thank you so much for your really helpful response!

Other way around would be to define few accent palettes for the light and dark modes and then you alias to one of the existing bright colours.

This is your main theme collection with light and dark modes

Light            Dark
Accent/Red       Accent/Red
Accent/Blue      Accent/Blue
Accent/Purple    Accent/Purple

And then you add your brand collection for different brands that would alias colours from the theme collection

Brand Blue
Primary {Accent/Blue}

Brand Purple
Primary {Accent/Purple}

Brand Red
Primary {Accent/Red}

This will give dark and light modes with balanced colours plus an ability to set brand mode however you like

Does this method still work? I tried doing the same but it looks like that since now Variables is not Beta anymore, Figma doesn’t allow it and my assumption is because if you allow sub-modes like that, you would be able to surpass the limit of 4 modes for Professional plan…

It still works for sure, limited to 4 modes on the Pro plan. For my design needs I made something different, to overcome that limitation

Hey @Pavel_Kiselev, do you know if is it possible to switch themes in Dev Mode this way?

Seems like it is! At least my instance got variable mode previews alongside with component props.