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.

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

🎨
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

📦
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.