Layout & Design

Light and Dark Mode Themes in Framer (Fundamentals Lesson 20)

Joseph

6:30

27K views

Feb 26, 2025

About this lesson

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.

https://www.youtube.com/watch?v=aR81Mx5a4As&t=0s Intro

https://www.youtube.com/watch?v=aR81Mx5a4As&t=7s How light and dark mode color styles work in Framer

https://www.youtube.com/watch?v=aR81Mx5a4As&t=30s Editing color styles for dark mode

https://www.youtube.com/watch?v=aR81Mx5a4As&t=68s Toggling between light and dark mode on the canvas

https://www.youtube.com/watch?v=aR81Mx5a4As&t=109s Applying dark mode colors to content and surfaces

https://www.youtube.com/watch?v=aR81Mx5a4As&t=163s Why functional names matter for color styles

https://www.youtube.com/watch?v=aR81Mx5a4As&t=198s Publishing and testing theme switching in the browser

https://www.youtube.com/watch?v=aR81Mx5a4As&t=220s Creating static colors that don’t change between themes

https://www.youtube.com/watch?v=aR81Mx5a4As&t=288s Converting a dynamic color style into a static one

https://www.youtube.com/watch?v=aR81Mx5a4As&t=360s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00color styles and framer have a major 0:02trick up their sleeve the ability to 0:04split them between themes for light and 0:06dark mode which means a single color 0:08style can dynamically switch themes 0:11based on your visitor's device settings 0:13if a visitor's device is set to light 0:14mode your site loads the light theme and 0:17if their devices set to dark mode your 0:19site automatically loads the Dark theme 0:21instead let's take a look at how crazy 0:24easy it is to make this happen in framer 0:30in the previous lesson we looked at how 0:31to create color styles and apply them to 0:34the properties of layers which is how we 0:36ended up with this example project with 0:38some color styles that have already been 0:40created and applied to the appropriate 0:42layers but each time we created a new 0:44color style we were technically only 0:46defining the color for the light mode 0:48theme which is always what will happen 0:50by default think of the light mode theme 0:52as the base theme it's the dark mode 0:55theme that we have to go out of our way 0:57to define if and when we decide to do so 1:00and we do this one color style at a time 1:03when we create or edit a color style we 1:05get this little toggle that always 1:07starts off in light mode but when we 1:09toggle over we can set a different color 1:11for dark mode which means every property 1:14connected to this color style will be 1:16able to swap back and forth but if I 1:18play around with the dark mode version 1:20of this color we're not getting any 1:22visual feedback on the canvas and the 1:25reason for that is that the canvas is 1:26still set to show us light mode down 1:29here we have a little toggle to go 1:31between light mode and dark mode and you 1:33might have thought that that just 1:34toggles the framer UI because the framer 1:36UI actually does go from light mode to 1:38dark mode but more importantly we are 1:40now seeing the dark mode version of all 1:42of our color styles directly on the 1:44canvas so for my content 100 my highest 1:47contrast content I'm going to go all the 1:49way up here to White which looks 1:52terrible at the moment but give it a sec 1:54now let's go down to Content inverted 1:57which is the content that is reversed 1:59against against our theme before in our 2:01light theme it was light so naturally in 2:04our Dark theme we'd want it to be dark 2:06so I'm going to go all the way to Black 2:07on this our content 50 which is our kind 2:11of middle gray content I'm actually 2:12going to try to leave that alone I'm 2:13going to see if that looks okay in both 2:15light mode and dark mode so I'm not 2:16going to switch that one over but our 2:18surface which is our background color 2:20here I am going to add a dark mode 2:22version and I am going to make that 2:24pretty much jet black let's just go jet 2:26black to keep things simple and then for 2:28surface one I'm I'm going to switch over 2:30to dark mode and you'll notice I'm 2:31clicking to toggle over to dark mode 2:33each time because when you create a 2:34color style even if you're looking at 2:36dark mode on the canvas it defaults to 2:39light mode that is the base version of 2:41the color so if you want to create a 2:43dark mode version of a color again you 2:45have to explicitly go into the dark mode 2:47tab here and for this surface which is 2:50applied to these cards here I'm just 2:52going to go a little bit of a lighter 2:54gray and give it kind of a cool tone and 2:57now I think we're looking good this 2:58whole thing is pretty much much themed 3:00for dark mode now you see why I named my 3:02colors the way I did in the previous 3:04lesson I named them after what they do 3:06what their function is within the design 3:08rather than the color that they were 3:10because the color changed and the name 3:12wouldn't make sense anymore between 3:13light mode and dark mode now let's 3:16actually publish this thing so I can 3:17show you what it looks like in the 3:19browser I'll open up our little staging 3:22link and then here we see dark mode 3:24because my computer is actually set to 3:26dark mode but if I open up my system 3:28settings and head to to the appearance 3:30tab when I switch my operating system 3:32from dark mode to light mode you'll 3:34notice that our site responds instantly 3:37and automatically how awesome is that 3:41now this result is cool and all but we 3:43really kind of took the easy way out and 3:45just inverted everything what if we 3:47wanted the footer to stay black instead 3:50of flipping to White which would also 3:51mean the text on the footer should stay 3:54white instead of flipping to Black it's 3:56an easy fix really we just need a couple 3:58of color styles that don't change 4:00between light mode and dark mode these 4:03are sometimes referred to as static 4:04colors so I'm going to head down here to 4:07my footer and I'm going to select the 4:09frame that has the fill applied to it 4:11and I'm going to come down here to the 4:12fill and we can see that it is connected 4:14to content 100 but again like we talked 4:16about in the previous lesson if I make a 4:17change up here it'll automatically 4:19become detached from the color style and 4:21I can choose to create a new style so in 4:24this case I'm going to name this static 4:27slash static 4:30black now the reason I'm calling it 4:32static black even though I said not to 4:34name the color after the color that it 4:36appears to be is because this static 4:38black is always going to be black so 4:40it's totally cool in this case and I'm 4:42going to click create now because I 4:44didn't explicitly set a dark mode 4:46version of this color it's going to 4:48remain the same all of the layers that 4:50are attached to this style are going to 4:52remain the same whether we're in light 4:54mode or dark mode you can see here if I 4:56toggle back and forth on the canvas the 4:58black stays black 5:00I just got to do the same thing for 5:01these white layers here so I'm going to 5:03select all of these holding the shift 5:06key so I can select each one and then 5:08I'm going to come down here and for the 5:09color of these I'll wiggle this up here 5:12to detach it from the style make it 5:14white and then I'll come down here to 5:15new style and name it static slash to 5:18create a folder called Static and I'll 5:20name this one static white and when I 5:23click create there we go now I have 5:25static black and static white and when I 5:27toggle back and forth everything that 5:29uses the static black or static white 5:31doesn't change but what if we've created 5:33a dark mode version of a color and we 5:35later change our minds and we say you 5:36know what I want this to be static 5:38instead that's also an easy fix back on 5:41the assets panel let's say that content 5:4350 that middle gray that I said I didn't 5:46want to change in dark mode let's say 5:48that I accidentally fiddled with this 5:50and now I've got a dark mode color that 5:52I don't want at any point on the assets 5:55panel I can go to the overflow menu and 5:57I can choose clear dark Style now we're 6:00back to just having the one static light 6:02mode style that will show up in both 6:03light mode and dark mode and there you 6:06have it now you know how easy it is to 6:08create light and dark themes for your 6:10color styles and how to be selective 6:12about what changes dynamically and what 6:14remains static that's it for this one 6:17I'll see you in the next one

TeachesThemes Color Styles

Also coversFrames Links Staging vs Production

Watch on YouTube ↗

‹ Framer Update: Image Exporting

Framer Update: Open Source Fonts ›