March 2025
Theme toggle in Framer
Creating the proper working Theme changing button
Introduction
Adding theme change functionality to your website is a great way to improve the user experience and stand out among others, as not many websites offer this feature. However, despite the wide functionality of advanced site builders, adding a simple button to change the theme is not as easy as it seems.
When I decided to add such functionality to my website, the first thing I thought about was use existing instruments since Framer allows you to create light and dark versions of your website. However, to my surprise, none of the official Framer component libraries provide you with a full-fledged theme switcher.
So I started looking for ready-made solutions on the Internet, and for my needs, the component had to satisfy a few basic requirements
The component should have a button variant, not a switch.
The component should not affect the default website theme, website should use device system theme by default.
The component should remember the theme, the user has set and the next time the site should load in the theme chosen during the previous session.
It should be free.
After testing a few components, I decided to stick with this one: themetogglesystem.framer.website.
It met only 3 of the 4 requirements, it had a button variant, it didn’t affect the default website theme and it was free.
But to work it in the way I want I had to heavily modify the component code.
How to add this button to your personal website?
Framer Light and Dark themes.
Before we move on to the component, I need to point out that the component works based on the Framer's built-in styles for dark and light themes.
So you need to set up colour styles for the dark and light themes to have Light and Dark mode on your website at all.
If you don't know how - watch official video on Framer Youtube channel:
Framer Update: Light & Dark Mode
Component and code logic.
The overall process is simple, but you first need to understand the design of this button and how the code files are related to it:
Button component construction:
- Button itself
→ An icon inside (Two variants: Dark & Light).
→ Two SWG icons.
Files:
ThemeToggleComponent - this is the code override you apply to the button.
theme-body-script - that’s a script you paste at the beginning of <body> tag.
ClientSideLoad - this is the code override that fixes one bug, we will talk about it later.
Important that the button component itself DOES NOT work without a script.
The script is necessary to avoid visual bug that occures because the component can affect the theme only after it is rendered. This means that when you open the website, for a brief moment it will be rendered in device system theme and then switch to the theme you chose during previouse visit.
To avoid this bug we need to make browser check which theme to apply before it starts to render the website, and do this we need this script. And the logic of theme changing process is connected between ThemeToggleComponent and theme-body-script, that’s done to simplify and optimize the process.
Create the button
Button component
First of all, you need the button itself.
Create a new component (the name of the component does not matter). Customize it in a way you want. You don't need to create different variants of the button, just one variant is enough, but you can add a hover state, as well as a mobile variant without a hover state. Also, I strongly suggest adding a Layout setting to the button to make sure that the icon inside the button will always be centred.
Inside the button, you create a new component for the icon. Again you can call this component whatever you want, it does not affect anything. But this component requires you to create two variants: “Dark” and “Light”
Inside the icon component, you paste icons for light and dark variants. You can use any icons you like.
Adding ThemeToggle override.
Next step is to create a code override file.
In the left Panel, go to “Assets”.
Scroll to “Code” section.
Press Plus button and choose New Code File.
Name this file SingleToggle and choose New override.
Press Create.
Now you’re in the Framer code editor.
Simply delete the example code written in the editor and paste the following code instead:
Now we need to apply this code override to our button:
Go to button component editing.
In the right panel scroll to Code Overrides section.
Press Plus button and then choose File - SingleToggle and Override - withSingleToggle.
And that’s all, the button is ready. Now we need to add theme-body-script to your website.
Add theme-body-script
Adding script:
The overall process is simple, but you first need to understand the design of this button and how the code files are related to it:
Go to Site settings.
Go to “General” tab.
Scroll to “Custom code” section and press Show Advanced.
Paste the script into Start of <body> tag
INPORTANT: You need to paste the script inside of the script tag.
Example:
The last fix
Now your button is perfectly working, but there is still one minor bug we need to fix.
You see, even though the script specifies the site theme before rendering, things are a bit more complicated with components.
By Framer's rules, a component will always render in the version that you used on the canvas in Framer when you built your website.
This means that the button will always be rendered in one variant, regardless of the theme of the site. In other words, the site is rendered in a dark theme, but the button will be rendered in a light theme.
There may be a way to fix this at the component level, but I was able to solve it in a different way - by making the button component render on the client/user side. In this case, the component will render in the correct variant.
ClientSideLoad override
So to make our component render on client side, we need to create another override, since Framer does not provide ability to specify rendering process.
So let's create this override. The procedure is the same as when we created a previous overwrite:
In the left Panel, go to “Assets”.
Scroll to “Code” section.
Press Plus button and choose New Code File.
Name this file ClientSideLoad and choose New override.
Press Create.
After that, you will be back in the Framer code editor, delete the example code and paste the code below.
Now we need to apply this code override to our button, but this time things are a bit different.
When rendering an element on the client side, this element will appear a little later than all other elements. Therefore, if you use a button inside a navigation bar component, I recommend that you apply this override not to the button, but to the entire navigation bar. If you are using the theme change button as a separate floating element on your site, then apply this override to the button itself
Besides, you should apply this override not to the component itself, but to its instance on the page.
Therefore, the procedure goes like this:
Go to website page that has button component.
Choose the theme button component or component that has theme button in it(Navbar for example).
In the right panel scroll to Code Overrides section.
Press Plus button and then choose File - SingleToggle and Override - withSingleToggle.
And now this component on this page will render on the client side, if you have multiple pages using this component, you need to repeat these steps on all pages.
As I said, the component to which you added this override will be rendered on the client side, which means that it may appear with a slight delay, to hide this delay you can add an Appear Effect animation.
That's all folks
Now you have your own fully customizable proper theme changing button that works in the way it should!
Support!
However, I also provide you with application assistance. If you have any questions or difficulties, you can submit your questions in this post on the Framer Community and I will try to help you resolve your issues.
Thank you for being here!
Come by sometime again