Creating Light and Dark Themes in Framer

Color styles in Framer have a major trick up their sleeve: the ability to split them between themes for light and dark mode.

Color styles in Framer have a major trick up their sleeve: the ability to split them between themes for light and dark mode.

Which means a single Color Style can dynamically switch theme’s to display based on your visitor's device settings. If a user’s device is set to light mode, your site loads the light theme. And if their device is set to dark mode, your site automatically loads the dark theme instead.

Let’s take a look at how crazy easy it is to make this happen in Framer.