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.
Bridge between Dashboard and Breakdance
v1.0.0 | Dashboard
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 - Download BreakColorUI Connector or search for "BreakColorUI"
- 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!
About Chrome's Security Warning
When installing the extension, Chrome may display a security warning. Here's what you need to know:
Why does Chrome show a warning?
Chrome displays a standard warning indicating the extension "can read and change data on websites you visit." This is a generic message that appears for all extensions that interact with web pages, regardless of whether they're safe or not.
The BreakColorUI extension is completely safe. The warning is triggered by permissions needed to detect Breakdance and apply design tokens automatically.
No Server Connection
Extension works entirely offline - no data is sent anywhere
Local Storage Only
Your design tokens are stored locally in your browser
Open Source
All code is available for inspection - no hidden behavior
What permissions does the extension need?
- • Storage - Saves your project settings locally in your browser
- • Active Tab - Detects when you're in Breakdance builder to activate automatically
- • Context Menus - Adds right-click menu option for quick access
How the extension uses these permissions
The permissions enable core features:
- ✅ Auto-Detection - Identifies Breakdance builder environment to activate modal automatically
- ✅ Direct Application - Applies colors directly to inputs without copy/paste
- ✅ Context Menu - Enables right-click "Open BreakColorUI" option
Without these permissions, the extension couldn't function - it wouldn't be able to detect or interact with Breakdance.
Privacy guarantees
We guarantee:
- ✅ No data collection or transmission to any server
- ✅ No browsing activity monitoring
- ✅ No tracking, analytics, or telemetry
- ✅ Extension only activates on Breakdance builder pages
- ✅ All processing happens locally in your browser
How to verify the extension is safe
- 1. Monitor network activity - Open Chrome DevTools (F12) → Network tab → Observe zero external requests
- 2. Review permissions - Visit
chrome://extensions/→ Click extension details → See exact permissions - 3. Check reviews - Read Chrome Web Store reviews from other users
- 4. Test in safe environment - Install on a test site first if you have concerns
Bottom line: The Chrome warning is a generic security prompt, not a sign of danger. BreakColorUI operates entirely locally with no external connections. Your privacy and security are our top priorities.
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 (#0090ff) */
var(--hcl-neutral-12) /* (#202020 light / #eeeeee dark) */
var(--bde-brand-primary-color) /* Maps to brand-9 *//* When you click a color in HEX mode: */
/* Light Mode: */
#0090ff /* Brand 9 */
#202020 /* Neutral 12 */
/* Dark Mode: */
#0090ff /* Brand 9 (same) */
#eeeeee /* Neutral 12 (inverted) */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