MARKETPLACE
PLUGINS
πŸŒ™ ULTIMATE DARK MODE TOGGLE (FREE)
πŸŒ™ Ultimate Dark Mode Toggle (Free) logo

πŸŒ™ Ultimate Dark Mode Toggle (Free)

Published February 2025
   β€’    Updated January 2026

Plugin details

πŸŒ™ Ultimate Dark Mode Toggle (Free)
The Easiest Way to Add Dark Mode to Your Bubble App
The Ultimate Dark Mode Toggle plugin lets you easily add a dark mode experience to your Bubble app with no coding required.

Designed for simplicity and performance, it automatically applies dark mode while allowing you to exclude specific elements and their child elements from being affected.

πŸ”‘ Key Features

⚑ Instant Dark Mode Activation
Enable dark mode effortlessly with a single workflow action.

❌ Manual Exclusions
Prevent elements and their child elements from being affected by dark mode by adding "ndark" to their HTML ID.

πŸ’Ύ Automatic Preference Saving
Dark mode settings persist across page reloads using local storage.

πŸ”„ Support for Reusable Elements
Exclusions work for headers, footers, navigation bars, and other reusable components.

βš™οΈ Optimized for Performance
Efficient implementation with minimal processing and no unnecessary loops.

Free

For everyone

stars   β€’   0 ratings
58 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

IFINITY | Build your 'if' logo
IFINITY | Build your 'if'
Joined 2023   β€’   14 Plugins
View contributor profile

Instructions

βš™οΈ How to Configure
1️⃣ Activate Dark Mode
Install the plugin.
Add the "Toggle Dark Mode" action to your Bubble workflows.

The plugin will automatically remember the user's
preference across page reloads.

2️⃣ Exclude Elements from Dark Mode
To exclude an element (and its child elements) from dark mode, add "ndark" to their HTML ID in Bubble.

Examples:

Button β†’ ndark
Image β†’ ndark
Form Input β†’ ndark

No coding requiredβ€”just update the element's ID, and the plugin will handle the rest.

πŸ’Ž Upgrade to Pro for More Control
The Pro Version offers advanced features for more customization and automation:

πŸ”² Full Container Exclusions
Apply "ndark" to a parent group, and all child elements will be excluded from dark mode.

πŸ› οΈ Automatic Exclusion for Common UI Elements
Avoid manually setting IDs for buttons, inputs, and forms.

🎨 Custom Dark Mode Colors
Choose your own background, text, and border colors for a fully personalized look.

πŸš€ Get Started Today
Add the Ultimate Dark Mode Toggle (Free) to your Bubble app and instantly enable dark mode.

Live Demo: https://if-devsplugin-66983.bubbleapps.io/version-test/plug-ins/1739770137884x494846763518656500

Bubble Plugin Page: https://bubble.io/plugin/one-click-dark-mode-toggle-free-1739710606625x399421841677746200

πŸ“© Support & Custom Plugin Development

Need help or looking for custom Bubble plugins? Contact us:

πŸ“§ Email: [email protected]
🌐 Website: if-inity.io

Types

This plugin can be found under the following types:
Background Services   β€’   Element   β€’   Event   β€’   Action

Categories

This plugin can be found under the following categories:
Productivity   β€’   Technical   β€’   Containers   β€’   Media   β€’   Image   β€’   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble