Automatic Light and Dark Mode

Introducing Color Styles with Theming in Framer

Color styles with theming allows you to create a color palette that works for both light and dark modes, ensuring your website designs align with the appearance settings of various devices and operating systems. The process is simple: design your color palette once, and then seamlessly use it throughout your entire project, including within animations.

Creating and Using Color Styles

To demonstrate the power of this new feature, let’s consider a demo project, a simple blog template. The process begins with selecting the fill property of your page. In this new release, the UI has been redesigned to make color styles more accessible. You can create a new color style for your page background and define both light and dark versions of this style. For instance, you might want a white background in light mode and a black one in dark mode. Once created, these color styles are easy to manage and organize.

Enhancing Text with Theming

These color styles aren’t limited to backgrounds; they extend to text styles as well. For example, you can have an H1 style that changes color based on the theme - black on light mode and white on dark mode. This ensures that your text layers are compatible with both themes, streamlining your design process.

Integrating Color Styles in Animations and Interactions

Color styles in Framer are versatile and can be integrated into various elements, including effects. For instance, in a collection list with a hover effect, you can animate the fill property to transition to a themed color style. This feature simplifies the process of creating animations and interactions that are compatible with both light and dark modes.

Enhanced Assets Panel for Easy Management

Framer’s assets panel has been updated for better usability. It's now simpler to differentiate between text styles and link styles, and all color styles are accessible from this panel. Editing color styles is straightforward – select the style from the panel and adjust the light and dark values as needed. This allows for quick iterations on your website designs. The panel also offers options to rename, duplicate, delete, or clear the dark style of a color.

Toggling Between Light and Dark Modes

A new icon has been added to the canvas toolbar in Framer, allowing you to toggle between dark and light modes. This feature updates the app UI and all the color styles to their respective themes, enabling you to preview your website in each theme without having to publish it. This functionality extends beyond web pages, even allowing you to design canvas elements that are legible and appealing in both modes.

In summary, Framer's new color styles with theming support is a significant enhancement, making it easier to design websites and applications that are visually cohesive and responsive to user preferences across different modes.