Dark Mode and Theming

Modes and themes allow styles to easily change when used in different contexts or users' preferences.

Applying different themes and modes in Figma

We use variables’ mode switching on Figma to jump from one mode to another.

To switch between Themes and Modes:

  1. Select an element within the Figma space
  2. Go into the Appearance/Layer section
  3. Click on the Apply variable mode button (⬡) and select the theme and/or mode you want to apply
Primary button component selected with theme mode options menu open in Figma.

 

And voila! The element you selected and its sublayers will change Themes and Modes!

Legacy Theme

You can switch between Flare and Legacy themes using the method above and selecting theme/legacy.

Theme dropdown showing auto, flare, and legacy options with legacy selected.

 

Dark Mode

You can switch between Light and Dark modes using the same method and selecting mode/dark.

Mode dropdown showing auto, light, and dark options with dark selected.

Theming playground

We have a simple playground if you want to play around with theming basics!

Duplicate the file or create a branch on it and start testing

Theming playground

Test the new theming feature on this file!
Borders
Code
Dark Mode and Theming
Code

Something looks broken on this site?

Report it to the Design System team here!

Resources

Support

© 2026 Spark Flare 4.0. Page last updated on May 6, 2026, 14:33