Light or Dark. Your Choice.

Dark
Light

Let your visitors choose their experience. Add a theme toggle to your Webflow site in minutes — no coding required.

FREE😄

⚡
Key Features

  • ⚡ Auto-detects system preference (dark or light)
  • ⚡ One-click manual theme toggle with no code required
  • ⚡ Custom styles for text, backgrounds, and links using data attributes
  • ⚡ Dynamic switching for icons and images based on theme
  • ⚡ Lightweight, fast, and dependency-free
  • ⚡ Works seamlessly in Webflow CMS and static pages
  • ⚡ Supports full customization with data-dark / data-light values
  • ⚡ Syncs with system theme changes in real time
FREE😄

🎥
See it in action.

video quick demo
LIGHT OR DARK VIDEO
FREE😄

🧩
Attribute

Use these attributes to control how elements respond to theme changes:

Attribute
Purpose
data-theme-toggle
📋 Copy Script
Add to the toggle element (button/div) to switch themes
data-set-theme="dark"
📋 Copy Script
Apply data-set-theme="dark" to directly set the theme.
data-set-theme="light"
📋 Copy Script
Apply data-set-theme="light" to directly set the theme.
data-icon="dark"
📋 Copy Script
Show element (icon) only in dark mode
data-icon="light"
📋 Copy Script
Show element (icon) only in light mode
data-theme-bg
📋 Copy Script
Adjusts background color based on the active theme
data-theme-text
📋 Copy Script
Adjusts text color based on the active theme
data-theme-link
📋 Copy Script
Adjusts link color based on the active theme
data-theme-img="dark"
📋 Copy Script
Shows image only when dark mode is active
data-theme-img="light"
📋 Copy Script
Shows image only when light mode is active
data-dark="#cc0000"
📋 Copy Script
(Optional) Custom color in dark mode
data-light="#f9f9f9"
📋 Copy Script
(Optional) Custom color in light mode

🧩
Attributes Behavior

You can add data-theme-text, data-theme-bg, or data-theme-link without assigning any values. If no data-dark or data-light is provided, default styles are applied automatically:

  • ⚡ Text: #000 (light), #fff (dark)
  • ⚡ Background: #fff (light), #000 (dark)
data-theme-text
📋 Copy Script
data-theme-bg
📋 Copy Script
data-theme-link
📋 Copy Script
fallback

🎨
Custom Colors

To use different colors for text and background, add them to separate elements.Then assign data-dark and data-light to each one:

data-dark="#cc0000"
📋 Copy Script
data-light="#f9f9f9"
📋 Copy Script
custom-data-theme image

📦
Install

Install the Theme Switcher App to give your visitors full control of their experience. It works with any Webflow project, is blazing fast, and easily customizable — no code required.

quick-demo

✅ Step 1: Copy the Script

<script src="https://cdn.jsdelivr.net/gh/crystalthedeveloper/theme-switcher/theme-switcher.js" defer></script>
📋 Copy Script

✅ Step 2: Paste It in Webflow

Go to your Webflow project settings → Custom Code tab → scroll to the Before </body> tag section and paste the script there.

Install Now
FREE😄
View on GitHub