Layout & Design

Framer Update: Light & Dark Mode

Benjamin

5:45

27K views

Mar 16, 2023

About this lesson

Introducing Color Styles with Themes. Design websites with a light and dark mode with ease—simply define color styles with both a light and dark value, then use within your layouts, text styles, components, effects, and more. Remix the Blog Template here: https://blog-themes.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00Yo, my name is Benjamin and in this 0:03video I'm very excited to introduce all 0:05new color styles with support for 0:09theming. This allows you to define a 0:11color palette both for a light mode and 0:14a dark mode. So you can design websites 0:17that match the appearance settings of 0:20your device or operating system. In 0:22Framer, you simply design your color 0:24palette once and then you can use it 0:26throughout your entire project, even 0:29within animations. So, let's dive into 0:32our demo project, which is a simple blog 0:35template. And this file is set up using 0:37our CMS. So, here we have the index 0:41page, and over here we have the detail 0:44pages. And we can use the new color 0:47styles with theming support to design 0:49both a light and a dark mode version of 0:52our blog. I'll select our homepage and 0:55head over to the fill property.0:58As you can see, the fill property is 1:00currently set to white. So, we're not 1:03using a color style just yet. In this 1:06release, we also redesigned this UI,1:09placing the color styles front and 1:12center while always allowing you to 1:14customize the color by keeping the 1:16picker open as well. So, let's create a 1:19new color style for our page background.1:23Here, we can give our color style a 1:25name. But you might also notice there's 1:28now a brand new control in which we can 1:31define both a light and a dark version 1:34of our color style. On dark mode, we 1:37would like our page background color to 1:39be black instead of white. So we have a 1:42single color style with two unique 1:44values. So let's create this color 1:47style. And as we do so, it gets added to 1:50the bottom of our list. I already have 1:53defined a few styles within this 1:55project, but we can simply sort them to 1:58reorganize. Now, as you can also tell by 2:01looking at the property panel, we're now 2:03using the backdrop style instead of a 2:06plain white value for the fill property 2:09of our homepage. These new color styles 2:12can also be used within text styles. So 2:16here we have an H1 style called title 2:20and it uses the titles color style and 2:24that color style also has themes. It's 2:28black on light mode and it's white on 2:31dark mode. This is a really powerful 2:33workflow as now we can simply assign 2:36this text style anywhere knowing that 2:39the text layers will work well on both 2:41light and dark mode. And these new color 2:44styles work practically anywhere in 2:46Framer.2:48For example, we can also use them within 2:51effects. So here we have a collection 2:54list and each row has a simple hover 2:58effect. And within the hover effect, we 3:00can animate the fill property. And 3:03instead of using a solid color, we can 3:06animate to a color style. And that color 3:09style can have themes as well. I think 3:12it's pretty magical how easy it now is 3:14to design animations and interactions in 3:17Framer that work well on both light and 3:20dark mode. In this release, we also made 3:23a lot of tweaks to the assets panel in 3:26Framer. It's now easier to differentiate 3:29text styles from link styles. Plus, you 3:33can now find all of your color styles in 3:35here as well.3:37You can even create new color styles 3:40right from within the styles menu. To 3:43edit a color style, you can simply 3:45select it right from within this panel.3:48And this also allows you to customize 3:51the light and dark values. It's a really 3:54quick way to iterate on your websites as 3:58now any layer that uses any of these 4:00color styles can be customized from 4:03within the assets panel. I can also 4:06rightclick on any color here to rename,4:10duplicate, delete, or clear the dark 4:14style. You can also use color styles 4:17without any theming functionality. If 4:20you simply define a single color value,4:23it will still work great as a reusable 4:26style. Finally, there's now a new icon 4:29in the canvas toolbar here that you can 4:32click to toggle between dark and light 4:35mode. This not only sets the app UI, but 4:39it also now updates all the color styles 4:42to their matching theme, meaning you can 4:45quickly see what your website will look 4:47like in each respective theme without 4:50having to preview or publish. And this 4:53even works outside of web pages in 4:56Framer. I can also use this on the 4:58canvas. For example, here I have a 5:01simple canvas note that I can now design 5:04to work well in both dark and light 5:06mode, ensuring the instructions remain 5:09legible and matching the user 5:12preference. And that's pretty much it 5:14for this video. This has been one of our 5:17most requested features, so we're super 5:19excited to get this out there. Thank you 5:22so much for watching. I hope you enjoyed 5:25the video and stay tuned for more 5:28updates coming soon.5:33[Music]

TeachesThemes Color Styles

Also coversCMS Pages / Dynamic Content Collection Lists Collections Hover & Press Links Semantic Tags Templates Text Styles

Watch on YouTube ↗

‹ How to start selling your Framer templates through Lemon Squeezy

Framer Update: CSV Import ›