This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.

Automatic Light and Dark Mode

Name: Automatic Light and Dark Mode
Uploaded: 2023-03-16T00:00:00.000Z
Description: 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.

Lesson details

Mar 16, 2023

5:44

Open Site

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.

Related videos