📖 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).

To apply specific styles to your Bubble elements, type the corresponding Tag into the element's ID Attribute field. (Note: The plugin uses a "contains" rule, so you can write my-button-eclipse-btn-pri and it will work perfectly).

💣 The Automatic Shortcut
eclipse-global: Place this only on the main Page's ID attribute. It automatically paints the entire page, native groups, popups, inputs, and normal texts using the base theme colors. You only need to use surgical tags for your specific brand buttons and highlight banners!

🧱 1. Layout & Backgrounds Tags
eclipse-bg: The deepest background color (#121212 in dark, pure White in light).

eclipse-surface: For Cards, Popups, Modals, and Floating Groups. Creates "elevation" with a slightly lighter/darker tone and applies the theme's border color.

eclipse-surface-alt: Deep elevation. Use this when placing a card inside another card for perfect visual separation.

eclipse-brand-bg: Paints an entire group with your Brand Color. Perfect for highlight banners or headers.

eclipse-glass: Premium Glassmorphism. Applies a 12% opacity background of your contrast color, a subtle border, and a 10px blur backdrop filter.

🔤 2. Typography Tags
eclipse-text: Standard text (Headings/Paragraphs). Flips perfectly between White (dark mode) and Black (light mode).

eclipse-text-muted: Secondary text, hints, and subtitles. A highly readable neutral gray.

eclipse-text-brand: Text painted with your pure Brand Color (great for icons or links).

eclipse-text-on-brand: Subtitles that live inside a Brand Background. Uses the perfect contrast color (White/Black) at 75% opacity for luxurious hierarchy.

📝 3. Forms & Inputs Tags
eclipse-input: For Dropdowns, Text Inputs, and Textareas. Applies surface background, standard borders, readable text, and preserves native Dropdown arrows.

🔘 4. Buttons Tags
eclipse-btn-pri: Primary Button. Brand color background with automatically calculated, highly accessible text color (Black or White).

eclipse-btn-sec: Secondary Button. Transparent background, thin theme border, standard text.

eclipse-btn-soft: Premium SaaS Button. Injects 15% opacity of the brand color into the background and 100% brand color for the text.



For best performance add this to your SEO and Metatags in header:
<script>
   // Eclipse UI V2 PRO: Runs before Bubble thinks!
   if (localStorage.getItem('eclipse_pro_theme') === 'dark' ||
      (!localStorage.getItem('eclipse_pro_theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
       
       // 1. Instantly notifies the HTML that we are in dark mode
       document.documentElement.setAttribute('data-theme', 'dark');
       
       // 2. Instantly paints the background dark to kill the white FOUC "flash"
       document.documentElement.style.backgroundColor = "#121212";
   }
</script>