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. 1. Visit Chrome Web Store - Search for "BreakColorUI" or visit the direct link from the homepage
  2. 2. Click "Add to Chrome" - Install the extension and confirm when prompted
  3. 3. Pin extension (optional) - Click the puzzle icon in Chrome toolbar and pin BreakColorUI
  4. 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. 1. Auto-detection active - Extension detects Breakdance builder automatically
  2. 2. Click any input - Click color, background, border, or spacing inputs
  3. 3. Modal appears - BreakColorUI modal shows all your design tokens
  4. 4. Browse & select - Click any value to apply it instantly to the input

Standalone Mode Workflow

  1. 1. Right-click - Right-click anywhere in Breakdance builder
  2. 2. Select "Open BreakColorUI" - From the context menu
  3. 3. Modal appears - Opens at cursor position with all tokens
  4. 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

CSS Variables Exampletext
/* When you click a color in CSS Variables mode: */ var(--hcl-brand-9) /* Applied to input */ var(--hcl-neutral-12) var(--hcl-success-9)
HEX Values Exampletext
/* When you click a color in HEX mode: */ #3b82f6 /* Applied to input */ #1a1a1a #22c55e

Switch copy modes

  1. 1. Open modal - Click any color input in Breakdance
  2. 2. Find toggle - Look for copy mode toggle at top of modal
  3. 3. Click to switch - Toggle between "CSS Variables" and "HEX"
  4. 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. 1. Build design system - Configure colors, typography, spacing in dashboard
  2. 2. Export to Global CSS - Copy CSS and paste in Breakdance → Settings → Global CSS
  3. 3. Sync to extension - Click "Send to Extension" in Export tab
  4. 4. Use CSS Variables mode - Toggle extension to CSS Variables for consistency
  5. 5. Build in Breakdance - Click any input to access your design tokens
  6. 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: