We have an experimental version of dark mode you can try out in your service. It’s handled automatically in code, so designers don’t need to do anything different. The Figma library doesn’t have a dark mode yet, so keep designing in light mode like you always have. Your designs will translate to dark mode when developers add the dark mode theme to your service.

If you’re using design system components, they all work with dark mode automatically.

If you have custom components that use our design tokens, they’ll switch to dark mode along with the rest of the system. Always worth testing to make sure things look right in both modes.

If your custom components don’t use our design tokens, they won’t switch on their own. You’ll need to handle dark mode for those yourself. We recommend using design tokens where you can so most of this happens automatically.

Either way, you can extend dark mode for custom needs by working with developers to add custom dark mode styles to your service.

The same goes for illustrations and images with set colors. These look the same in both modes, so check whether they read well on a dark background or whether you need a dark version.

Dark mode is still being tested. Try it out in your service and let the design system team know what works, what doesn’t, and what’s missing.

Two ways users end up in dark mode. Use either, or both:

• System settings. If their operating system is in dark mode, your service follows automatically.
• A toggle in your service. Let users switch modes themselves through a preferences or settings screen.