Step-by-Step Guide: Dark & Light Mode Toggle in Webflow
Written by
Pardeep Verma
CMS developer
Diksha Arora
Wordpress Developer
Table of contents
Build with Radial Code
Share this
Dark mode has become an essential feature in modern web design, improving both user experience and accessibility. If you want to integrate a dark and light mode toggle in Webflow, this guide provides a step-by-step approach to achieving it effectively.
Step 1: Define Your Color Variables
Before adding the toggle functionality, you need to create color variables for both themes.
- Create Color Variables:
- Set up a separate set of colors for dark mode.
- Set up another set for light mode.
- Apply Variables to Elements:
- Assign these variables to your page or required sections.
- Link them to background colors, text, buttons, and other UI elements.
Step 2: Add a Toggle Button
- Insert a Toggle Button:
- Place a div block inside your Navbar or another preferred section.
- Style the toggle switch to match your website’s aesthetic.
- Attach a Data Attribute:
- Select the toggle button and assign it a data attribute:
- Attribute Name: tr-color-toggle
- Value: Leave it empty
Step 3: Implement JavaScript for the Toggle Function
To enable the dark mode toggle, insert the following JavaScript in Webflow’s Project Settings under Custom Code in the Before Body section.
<script
tr-color-vars="background, text, button-background, button-text, toggle-offset"
duration="0.5"
ease="power1.out"
src="https://cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.0/dark-mode-toggle.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
Step 4: Publish and Test Your Toggle
- Save and Publish Your Site:
- Once you've made the changes, publish your Webflow site.
- Test the Functionality:
- Click the toggle switch and ensure that the dark and light modes function properly.
- Refresh the page to verify if the selected mode persists.
Final Thoughts
Watch the Full Tutorial
By following these steps, you’ve successfully implemented a dark and light mode toggle in Webflow using color variables and GSAP animation. This ensures a smooth user experience with modern theme-switching capabilities.
If you found this tutorial helpful, explore more Webflow guides and enhancements.
Get Expert Assistance
Need professional help with website development? Visit Radial code.
