[NEW PLUGIN] Eclipse UI 🌘 - Auto Dark Mode with OS Sync & Zero FOUC!

Showcase Plugins
1

Hey Bubblers! :waving_hand:

Native Bubble style variables are great, but they hit a brick wall when it comes to external elements. Eclipse UI’s inversion engine effortlessly forces Dark Mode on:

  • Stripe Payment Elements (IFrames)

  • Complex Chart & Analytics Plugins

  • Rich Text Editors & Embedded Calendars

  • Legacy apps with hundreds of detached styles

“Design once. Convert automatically. Scale infinitely.”

Eclipse UI is a premium, plug-and-play Theme Conversion Engine. You drop it into your Header, and it instantly generates a flawless Dark Mode for your entire app using Smart CSS Injection.

:man_zombie: Eclipse UI uses a Smart Inversion Algorithm that automatically protects your media.

:glowing_star: Killer Features:

  • :high_voltage: Zero FOUC (No White Flashes): It has an autonomous Local Storage brain. When your user navigates between pages, Eclipse UI paints the page black before Bubble even renders the screen. Seamless, native-feeling navigation.

  • :mobile_phone: OS System Detection: If a user opens your app for the first time and their iPhone or Windows is in Dark Mode, the plugin detects it and syncs the app automatically!

  • :bullseye: Granular Exclusions: Want to keep your primary brand button blue? Just add its class to the Exclude Selectors field, and the engine ignores it.

  • :floppy_disk: Database Sync: Dedicated actions to force theme states so you can easily sync user preferences across different devices upon login.

Setup takes less than 2 minutes:

  1. Put it in your Header.

  2. Add a workflow to your Moon/Sun icon: Eclipse UI - Toggle Theme.

  3. You’re done. Go grab a coffee! :hot_beverage:

Check it out HERE

Let me know what you think! I’d love to see the beautiful dark modes you create with this. :clinking_glasses::sparkles:

2

Wonder why someone would go through hundreds of settings if you can just add a few conditionals to your style guide and have a dark mode?

3

Fair point! If you are building an app entirely from scratch today, with strict and perfect adherence to Bubble’s new Style Variables and absolutely zero detached elements, that is definitely the native way to go.

However, Eclipse UI was built for the ‘real world’ scenarios where that isn’t always the case:

  1. Legacy Apps & Detached Styles: Most existing apps have hundreds of detached styles. Fixing them manually to support native variables takes days. Eclipse UI takes 3 seconds.

  2. Third-Party Elements: Bubble’s native styles cannot target external IFrames (like Stripe elements or embedded dashboards), complex HTML, or UI plugins. Eclipse’s inversion engine captures all of them flawlessly.

  3. Speed for MVPs: Sometimes you just want to offer Dark Mode to your users instantly without spending hours configuring inverse color palettes in the Style Guide.

For the purists, native variables are great! For those who want instant, blanket coverage (including external plugins) with OS-sync and zero FOUC, Eclipse is a massive time-saver.

4

Ok, well, I guess this would be the main selling point of your plugin that you didn’t mention, because setting conditionals in the style guide only takes a few minutes.

If your plugin handles other plugins like Stripe, etc., that would be a selling point

5

I really appreciate the feedback! I’m going to update the main post and the plugin page to highlight this properly. Thanks for pointing it out! :clinking_beer_mugs: