How to Add Dark and Light Mode to Your Framer Website

1. Start with a simple section

Open your project in Framer and add a section with some text. This will be your example area to test how the theme switch works.

2. Create your color styles

In the Styles panel, create your color tokens. Make sure every color has a value for light mode and dark mode.
For example:

• Text → Black (light) / White (dark)

• Background → White (light) / Black (dark)

This way, Framer automatically knows which color to use depending on the active theme.

3. Apply the styles to your text

Instead of picking a fixed color, apply the styles you just created to your text elements. Now when the theme changes, your text updates instantly.

4. Add a theme toggle

To let users switch between light and dark mode, you can use the Theme Toggle component by Framer Geeks. Just paste it into your project, and you’re done.

5. Publish your site

Hit publish and test it out. Your site now supports dark and light mode, and your visitors can choose the theme they prefer.