🧩 Step 1 — Install & Add the Element
Go to the Plugins tab in your Bubble editor.

Search for Smart Dark Mode Pro and click Install.

In your page editor, add the Dark Mode Manager element.

This element is invisible on your page.

You only need one instance of it per app.

💡 Tip: place it on your main reusable page or header, so it applies across all pages.

⚙️ Step 2 — Create Workflows

Use workflow actions to control the dark/light theme.
In the Workflow tab, select one of the plugin actions:

🌓 Enable Dark Mode → Activates dark theme immediately.

🌞 Disable Dark Mode → Reverts to light theme.

🔁 Toggle Dark Mode → Switches automatically between dark/light modes.

💡 You can connect these actions to buttons, icons, or condition-based triggers (for example, when user clicks a “🌙 Theme” icon).

🎨 Step 3 — Adjust Settings (Optional)

Customize how your dark mode behaves in the Dark Mode Manager element properties:

Setting Description
Save user preference Remembers last selected mode (dark/light)
Auto sync with OS Matches system-level theme (Windows, macOS, Android, iOS)
Transition duration (ms) Controls the fade speed during theme changes
Invert images Optionally inverts image colors to match dark theme
Preserve element IDs Keeps specific IDs unaffected by theme switch
Custom primary color Set your preferred main accent color

💡 Combine these options to create smooth, professional transitions.

🧪 Step 4 — Test Your App

Click Preview in Bubble.

Trigger your workflow (e.g., click your dark mode button).

Watch your app smoothly adapt between dark and light themes.

🎉 Done! Your Bubble app now has a persistent, OS-synced dark mode.

🧠 Pro Tips

Place the plugin element inside a reusable header or layout to apply across all pages.

Combine with Bubble’s “Set state” or conditionals to dynamically change colors or styles.

Works great with design frameworks like Material Design and Flat UI.

👉 You can test and inspect this plugin directly in the demo editor:
https://bubble.io/page?type=page&name=index&id=flowstackdarkmodedemo