How to create and use Light & Dark Mode in an App or Website design
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![A flower that represents Figma with the text "Light & Dark Mode" beneath it.](https://www.delasign.com/CDN/images/How-to-create-and-use-Light-Dark-Mode-in-an-app-or-website-in-Figma.webp)
A step by step guide on creating a design system that uses light and dark mode, applying it to a design and displaying it in Figma.
Please note this feature builds on our design system tutorial and is only available on education, professional or organization Figma accounts.
Step One: Create a Design System that uses Light and Dark Mode
![A screenshot of Figma showing the styleguide of the Price After app.](https://www.delasign.com/CDN/images/Create-Design-System.webp)
Follow the tutorial below to create a Design System that includes Atoms, a Styleguide and a Layout manager.
Make sure that you create two modes, one for light mode and one for dark mode, and that use Tokens for each color.
Step Two: Apply the Color Tokens
![A screenshot of Figma showing how all the screens and components use tokens from the Price After styleguide variable collection.](https://www.delasign.com/CDN/images/Use-Tokens.webp)
Apply the color tokens linked to the light mode and dark mode from the Styleguide across your app and websites design.
Step Three: Display the Designs
![A screenshot of Figma showing how we used Sections to display the designs in light mode and dark mode. Tutorials available below.](https://www.delasign.com/CDN/images/Test_2023-08-14-202712_zoas.webp)
See the designs in light mode and dark mode by either:
- Setting the default Styleguide mode for an entire page within a design file to Light Mode or Dark Mode
- Creating sections for Light Mode or Dark Mode, and setting each section to the relevant mode
Looking to learn more about things you can do with Variables or Figma ?
We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.