Dark mode
This feature requires two Figma variable modes called “light” and “dark”. This is only available with Figma’s Professional plan and up. See Figma’s pricing for more information.
Design with variables
Use variables for anything that you want to change between light and dark modes.figma.to.website will look for variables with two modes specifically called “light” and “dark”. You can use any of these modes in your designs. Based on the visitor’s preferences (as configured in their browser or Operating System settings), figma.to.website will automatically use the corresponding “light” or “dark” mode values for the website.
Switch component
To toggle between light and dark modes, you’ll need to add a new text variable to your variable collection. This variable controls which variant to show for the switch component; you can call it whatever you like.For example, let’s call this new variable “theme” and set the values to correspond to each mode, so for “light” for light mode, and “dark” for dark mode. For the switch component, create two variants called “light” and “dark”, and assign the Prototype actions so that “On click” -> “Set variable mode” accordingly. You’ll see an example below where we have two variants: a sun icon for light mode that, when clicked, sets the collection variable mode to “light”, and a moon icon for dark mode that sets the collection variable to “dark”.
So, when the user clicks on the sun, they’ll toggle light mode, and vice-versa.
The last step is to bind the current theme to the instance variant. You can do that by clicking the
“Assign variable...” icon next to the variant option when the instance is selected. Select the “theme” variable to set which variant to show.