Set Branding

Change Colors

  1. Open the Demohacks side panel and select Set Branding
  2. Click the + button to create a new rule
  3. Choose Change Colors
  4. Enter the Color Variable name (e.g., --color-primary, --color-accent)
  5. Set the Default Color (hex format, e.g., #155DFC)
  6. Optionally add a URL Filter to limit the rule to specific pages
  7. Save the rule

To apply a custom color:

  • In the branding rules list, click the color picker next to a rule
  • Select your customer’s brand color
  • The color applies immediately when demo mode is enabled

Replace Logos

  1. Select Set Branding from the toolbox
  2. Click the + button to create a new rule
  3. Choose Change Logo
  4. Click the element selector button next to Default Image
  5. Hover over the page to highlight elements, then click the image you want to replace
  6. Upload your replacement image by:
    • Dragging and dropping an image file onto the upload area, or
    • Clicking to select an image from your computer
  7. Optionally add a URL Filter

How It Works

Colors: The extension injects CSS variables that override the site’s color scheme. Works with any CSS variable the site uses.

Images: Replacement images are automatically resized if larger than 640px. The extension maintains the original image’s aspect ratio and fits it within the displayed dimensions.

Tips

  • For colors, inspect the website’s CSS to find variable names (look for --color-* in the stylesheet)
  • Image files are automatically optimized: large images are resized to 480px width
  • SVG images are preserved without resizing
  • Both color and image replacements work in real time when demo mode is enabled