Automatic Light and Dark Mode

Define color styles with both a light and dark value, then use within your layouts, text styles, components and effects.

Define color styles with both a light and dark value, then use within your layouts, text styles, components and effects.

In this Framer tutorial, you will learn Automatic Light and Dark Mode. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance. See Wireframer: Dark Mode. See Light and dark mode options.

Lesson details

Mar 16, 2023

5:44

Open Site

Related videos

Academy