ARTICLE
I’ve always been a fan of the idea of allowing users to customize the website’s theme based on their preferences. This feature enables users to view the website in a way that suits their needs and enhances readability in various lighting conditions. Personally, I’m a huge advocate for “Dark mode.” I believe I’ve enabled dark mode on every app that supports it. My reason? I feel that dark mode consumes less battery on my devices and it just looks better (I mean, does anyone voluntarily use light mode in Discord?)
Discovering 'true' theme switching
I first tried it in Wix Studio, but unfortunately, I couldn’t find a way to do it. I went through numerous tutorials, but none of them actually changed the theme. Most of them used CSS to hide one theme and show the other theme on the click of a button. This approach resulted in poor accessibility, unnecessary asset loading and slow website speeds.
Then I tried Framer. I already knew that Framer had the capability to automatically switch the website's theme based on the user's system preferences. All I needed to do was create the color palettes for light and dark theme and name them appropriately. And that's it! I just have to create a website as I normally would using the asset colors and after publishing the website , the theme of the site would automatically switch . This was incredibly simple and straightforward.
But what if users want more control?
I was definitely excited to see the two themes working perfectly but I wondered, "What if I could also manually switch the theme?" There's no harm in implementing that and it will also give the users more freedom and control.
I started planning on how this manual theme switching would be executed. I needed a button to act as a trigger, something that would easily be able to identify the color palette that I already have in my assets panel and some kind of logic that would override the default auto theme switching capability of Framer. It took a few tries. I had to refer to a previous project where I had created something similar and voila! It worked!
How is this theme toggle different?
This method uses a bit of HTML and a code component to act as a button trigger. To implement this, I added the color palettes for both light and dark modes in the assets panel and add the theme button component in my site page header (Since I want the theme toggle to be visible across pages).
The best part of this toggle? The theme doesn’t instantly change when I click the toggle. I wanted a smooth animation, so I added a fade effect to this component whose timing can be adjusted as needed. Whenever I click the button, the theme transitions gradually to either light or dark theme.
How to achieve this?
The HTML code is placed in the site's head code. This allows the theme to stay consistent across different pages, adds the function for the fade animation and exposes a global function.
The component is placed preferably on the header of the website. Make sure the naming scheme matches to that of the site color names in the asset panel.
Going beyond two themes
Since this worked, adding multiple themes to set a mood should work as well. Since Framer only allows us to set two color palettes, adding more than that probably requires editing the HTML and writing the hex codes for each element. I haven't tried that yet but I do think this should work as well!