Customization

Dark Mode

Switch from light to dark mode

To switch from light to dark color mode for a Page, choose the "Dark" option found in the Page variable settings situated in the top right corner of the Figma user interface. Additionally, you can switch from light to dark mode for an individual frame by following the same process in the Layer options.

Switch from light to dark mode

  1. Install Apply Current Background to All Pages plugin.
  2. Open the Figma Tokens plugin.
  3. On the left side of the plugin’s UI, you will see the ‘dark’ set. Click on the checkbox inside.
  4. Wait until all components are restyled (it can take up to 5 minutes).
  5. Once it’s done, close the Figma Tokens plugin.
  6. In the Background settings in the top right corner of Figma’s UI, change the page's background color to #000000.
  7. Open the Apply Current Background to All Pages plugin and wait a few seconds.

Voila! Now you have your designs made in the dark theme!

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.