Eclipse UI logo

Eclipse UI

Published May 2026
   β€’    Updated today

Plugin details

Welcome to Eclipse UI β€” The Smart Theme Conversion Engine πŸŒ“
β€œDesign once. Convert automatically. Scale infinitely.”

Building a Dark Mode natively in Bubble is a nightmare. Adding When Dark Mode is Yes conditionals to every single text, group, and button takes dozens of hours and destroys your app's performance.

Eclipse UI solves this instantly. It is a premium, autonomous CSS-injection engine that automatically converts your entire Bubble app into a beautiful Dark Mode with zero manual conditionals.

Unlike cheap filters that make your images look like X-rays, Eclipse UI uses a Smart Double-Inversion algorithm. It turns your backgrounds dark and text light, while perfectly preserving your photos, videos, and brand colors!

🌟 PRO Core Features:

⚑ Zero FOUC (Flash of Unstyled Content): Built-in autonomous Local Storage memory. The plugin paints the page black before the screen even renders. Smooth transitions across all pages!

πŸ“± System OS Detection: Automatically detects if the user's iOS, Android, macOS, or Windows is in Dark Mode and syncs the app on their first visit.

πŸ–ΌοΈ Smart Media Protection: Automatically protects <img>, <video>, <iframe>, and canvas elements from being inverted.

🎯 Granular Developer Controls: Exclude specific elements using classes or IDs (e.g., #my-logo or .brand-button).

πŸ’Ύ Database Sync Ready: Easily force states to sync with your User Database across multiple devices.

Stop wasting hours on conditionals. Drop Eclipse UI into your Header and give your users the premium Dark Mode they deserve! πŸ₯‚


Demo Page: https://demo-app-56978.bubbleapps.io/version-test/eclipse_ui/1779029088023x855343986796912600


Editor Page: https://bubble.io/page?id=demo-app-56978&test_plugin=1779012739106x115713941737046020_current&tab=Design&name=eclipse_ui

$15

One time  β€’  Or  $5/mo

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

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   β€’   88 Plugins
View contributor profile

Instructions

πŸ“– Complete Setup Instructions Step 1: The Global Setup

Open your main Reusable Element (usually your Header or Sidebar) so the plugin runs on every page.

Drag and drop the Eclipse UI element onto the canvas (it is invisible in run-mode).

Set your default design rules in the plugin's properties (Transition Speed, Preserve Media, etc.).

Step 2: The Toggle Button (For the User)

Add an Icon or Button in your Header (e.g., a Moon icon πŸŒ™).

Create a workflow: When Icon is clicked -> Add the action Eclipse UI - Toggle Theme.

(Optional) To change the icon based on the theme, go to the Icon's Conditionals: When Eclipse UI's is_dark_mode is "yes" -> Change icon to Sun β˜€οΈ.

Step 3: Syncing with your Database (Optional but PRO)
Want to remember the user's choice if they log in on a new computer?

When the user clicks the Toggle button, add a step to save the state to your database: Make changes to current user -> dark_mode = Eclipse UI's is_dark_mode.

Create a login workflow: When User is logged in -> Add the action Eclipse UI - Set Theme. Set the force_dark field to your database value (Current User's dark_mode).

For best performance add this to your SEO and Metatags in header:
<script>
   // Runs before Bubble thinks!
   if (localStorage.getItem('eclipse_ui_theme') === 'dark' ||
      (!localStorage.getItem('eclipse_ui_theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
       document.documentElement.style.backgroundColor = "#121212";
       document.documentElement.style.filter = "invert(1) hue-rotate(180deg)";
   }
</script>

Types

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

Categories

This plugin can be found under the following categories:

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble