Step-by-Step: How to Use Theme Engine Pro Step 1 — Install the Plugin

Install Theme Engine Pro from the Bubble plugin marketplace.

Step 2 — Drag the Element Onto Your Page

Add the Theme Engine Pro element:

Best practice:

Place it in a reusable header
OR

Place it at the top of your main page

You only need one instance per page.

Step 3 — Set Your Base Color

In the element properties:

Base Color → #4F46E5 (example)

That’s it.

The plugin will automatically:

Generate harmonized background

Generate card surface color

Generate nested surface color

Style buttons

Style inputs

Enforce text readability

Step 4 — (Optional) Assign Group IDs for Layered Surfaces

For premium layered UI:

Original (Main) Cards

Select a Group →
ID Attribute →

original_grp

These groups will receive the main surface color.

Nested Groups (Inside Original Groups)

Select nested Group →
ID Attribute →

second_grp

These receive a slightly different harmonized surface color.

Result:

Page
→ Card
→ Nested Card

Beautiful, premium visual hierarchy.

Step 5 — Enable Transitions (Optional)

Enable:

Enable Transition: yes
Transition Duration: 300ms

Your theme will animate smoothly when changed.

Step 6 — Apply Theme via Workflow (Optional)

You can use the action:

Apply Premium Theme

To dynamically change the app color at runtime.

Example use cases:

User selects brand color

SaaS white-label platform

Dark / light switching

Admin theme control

EDITOR:
https://bubble.io/page?id=testlpu&test_plugin=1772377330103x226768159566725120_current&tab=Design&name=theme_engine_pro1&type=page&elements=cnEeu

DEMO:
https://testlpu.bubbleapps.io/version-test/theme_engine_pro1