Read Time

0

min

Read Time

0

min

Get Started

Oct 11, 2025

Switching Between Light and Dark Modes in Framer

In Framer, you can build a personalized design environment with light and dark modes, enhancing work efficiency with color style previews. Choose the optimal theme for your work with a simple switch.

Framer Logo for Blog Authors

Uploaded by

Profile of Blogger Kim Yejeong

Translated by

Blog thumbnail illustrating how to switch between light and dark modes in Framer, highlighting features that implement a personalized design workspace and reduce eye strain.
Blog thumbnail illustrating how to switch between light and dark modes in Framer, highlighting features that implement a personalized design workspace and reduce eye strain.
Blog thumbnail illustrating how to switch between light and dark modes in Framer, highlighting features that implement a personalized design workspace and reduce eye strain.

Contents

Table of Contents

This document aims to address the challenges faced by Korean users learning Framer due to a lack of Korean resources. We’ve translated content from the official blog into Korean and added practical information. We hope it provides some help to those using Framer.

What is Framer's Light/Dark Mode?

In Framer, you can choose between a Light or Dark theme to reduce eye strain and personalize your design workspace. Choose Dark Mode to lessen eye fatigue in darker environments, or Light Mode for better readability.

These two modes not only change the interface's brightness but also affect the color style preview of the projects. Light Mode displays colors with a light background, while Dark Mode uses a dark background, allowing you to preview the design balance.

How to Switch Between Light/Dark Mode

There are two ways to switch modes: using the button in the Canvas menu or using shortcuts. Both methods make it easy to switch themes.

Canvas 메뉴에서 전환 버튼이 활성화 된 상태입니다.,
  1. Use the Switch Button in the Canvas Menu
    Click the light/dark button in the toolbar at the bottom of the canvas to switch themes instantly.

  2. Use Shortcuts
    Press ⌃⌘N (Control + Command + N) on the keyboard to easily change the theme.

Removing Dark Mode Color Styles

If you've added color styles for Dark Mode in your project and want to remove them, follow the steps below.

Clear Dark Style 이 호버된 상태입니다.
  1. Open the Assets panel

  2. Click the three dots (···) next to the color styles

  3. Select “Clear Dark Style” to complete the process

In Conclusion

You can now create a personalized design workspace in Framer. Choose the theme that best fits your design style between Light and Dark Mode to build an efficient work environment.

This article is a translated and adapted version of Framer's official blog post ‘Light and dark mode options’.

Share Blog

Share Blog

Become a
Framer Expert

Any expert capable of Framer outsourcing can apply.
We connect experts and clients directly, with no intermediary fees.

Become a
Framer Expert

Any expert capable of Framer outsourcing can apply.
We connect experts and clients directly, with no intermediary fees.

Become a
Framer Expert

If you are an expert available for Framer freelance work,
anyone can apply.
No intermediary fees, we directly connect
experts and clients.