Chrome Extension
Install and use the BreakColorUI extension for Breakdance Page Builder
What is the Chrome Extension?
The BreakColorUI Chrome Extension integrates your design system directly into Breakdance Page Builder. Click any color input in Breakdance, and instantly access all your design tokens without copying and pasting.
Auto-Detection
Automatically detects when you're in Breakdance builder - no manual activation needed
Click to Apply
Click any color input to see your entire color system organized by category
CSS Vars or HEX
Toggle between CSS variables and raw HEX values depending on your workflow
Seamless Breakdance integration
- • Access all your design tokens: brand, neutral, custom colors, typography, spacing
- • Intelligent modal positioning with 4-position fallback system
- • Persistent settings across sessions - your preferences are remembered
- • Right-click menu for standalone access anywhere in Breakdance
Installation
Get the extension installed and synced in just a few minutes:
4-Step Installation
- 1. Visit Chrome Web Store - Search for "BreakColorUI" or visit the direct link from the homepage
- 2. Click "Add to Chrome" - Install the extension and confirm when prompted
- 3. Pin extension (optional) - Click the puzzle icon in Chrome toolbar and pin BreakColorUI
- 4. Sync your project - In BreakColorUI dashboard → Export tab → "Send to Chrome Extension"
First-time setup required
The extension won't do anything until you sync a project from the BreakColorUI dashboard. Make sure to complete step 4 before trying to use it in Breakdance!
Two Ways to Use
The extension works in two modes: automatic (when you click inputs) and standalone (via right-click):
Automatic Mode (Recommended)
Click any color or spacing input in Breakdance - modal appears instantly with your tokens
Standalone Mode
Right-click anywhere in Breakdance → 'Open BreakColorUI' for manual access
Automatic Mode Workflow
- 1. Auto-detection active - Extension detects Breakdance builder automatically
- 2. Click any input - Click color, background, border, or spacing inputs
- 3. Modal appears - BreakColorUI modal shows all your design tokens
- 4. Browse & select - Click any value to apply it instantly to the input
Standalone Mode Workflow
- 1. Right-click - Right-click anywhere in Breakdance builder
- 2. Select "Open BreakColorUI" - From the context menu
- 3. Modal appears - Opens at cursor position with all tokens
- 4. Copy values - Click any token to copy to clipboard for manual paste
Copy Mode Settings
Choose between CSS Variables or HEX values depending on your needs:
CSS Variables Mode
Applies colors as var(--hcl-brand-9) - best for theme-aware designs
HEX Values Mode
Applies colors as #3b82f6 - best for quick color picking
/* When you click a color in CSS Variables mode: */
var(--hcl-brand-9) /* Applied to input */
var(--hcl-neutral-12)
var(--hcl-success-9)
/* When you click a color in HEX mode: */
#3b82f6 /* Applied to input */
#1a1a1a
#22c55e
Switch copy modes
- 1. Open modal - Click any color input in Breakdance
- 2. Find toggle - Look for copy mode toggle at top of modal
- 3. Click to switch - Toggle between "CSS Variables" and "HEX"
- 4. Auto-saved - Your preference persists across sessions
When to use each mode
Use CSS Variables when:
- • You want theme-aware designs (light/dark mode)
- • You need easy global updates
- • You're building with a design system
Use HEX Values when:
- • You need quick one-off color picking
- • You're working on legacy projects
- • You want fixed color values
Troubleshooting
Common issues and quick solutions:
Modal Not Appearing?
Sync project from dashboard, verify you're in Breakdance builder, refresh page
Colors Not Updating?
Re-send to extension after updates, refresh Breakdance, clear browser cache
Wrong Colors Applying?
Check copy mode (CSS vs HEX), verify Global CSS includes tokens, confirm synced project
Modal not appearing?
- • Sync required: Make sure you've sent a project from the dashboard
- • Right environment: Verify you're in Breakdance builder (not WordPress admin)
- • Refresh needed: Try refreshing the page after syncing
- • Extension enabled: Check extension is enabled in Chrome settings
Colors not updating after changes?
- • Re-sync required: Click "Send to Extension" again in Export tab
- • Refresh builder: Reload your Breakdance page
- • Cache issue: Clear browser cache if colors still outdated
Using CSS Variables but wrong colors showing?
- • Global CSS missing: Ensure Breakdance Global CSS includes your exported tokens
- • Variable not defined: Check the CSS variable exists in your Global CSS
- • Wrong project: Verify you synced the correct project to the extension
Best Practices
Get the most out of the Chrome Extension:
Prefer CSS Variables
Use CSS Variables mode + Global CSS for theme consistency and easy updates
Resync After Changes
Always resync to extension after updating your design system in dashboard
One Project at a Time
Extension stores one project - resync when switching between different sites
Semantic Schema Names
Use clear names (success, error, warning) to find colors quickly in modal
Recommended workflow
- 1. Build design system - Configure colors, typography, spacing in dashboard
- 2. Export to Global CSS - Copy CSS and paste in Breakdance → Settings → Global CSS
- 3. Sync to extension - Click "Send to Extension" in Export tab
- 4. Use CSS Variables mode - Toggle extension to CSS Variables for consistency
- 5. Build in Breakdance - Click any input to access your design tokens
- 6. Update & resync - When updating design system, export again and resync
Next Steps
Ready to start building with your design system?
You're all set!
You now have a complete understanding of BreakColorUI! Here's what you can do next:
- • Head to Dashboard to create your first project
- • Review Documentation Home for quick reference
- • Check out Export Guide to understand all integration methods