How to add dark mode to a Figma website

Dark mode needs two Figma variable modes named light and dark. Several modes in a collection are available on Figma’s Professional plan and above: see Figma’s pricing.

Design with light and dark variables

Use variables for everything that changes between light and dark: colors, images, icons… figma.to.website looks for a collection with two modes named exactly light and dark. Design in either mode.

On the published site, figma.to.website follows the visitor’s preference, as set in their browser or operating system, and uses the light or dark values.

Add a light/dark switch

To let visitors toggle the theme:

1. Add a text variable to the collection to control which variant of the switch shows. Name it as you like — say theme — with the value light in the light mode and dark in the dark mode.

2. Create a switch component with two variants, light and dark. Give each an On click → Set variable mode interaction. Here, the sun variant sets the collection to light, and the moon variant sets it to dark: clicking the sun turns on light mode, and the moon dark mode.

   

   

3. Place an instance of the switch on your page.

4. Bind the variant to the theme: with the instance selected, click the Assign variable icon next to its variant property, and pick the theme variable.

   

That’s it: publish your site, and visitors can switch between light and dark.