Theming

Customize the widget appearance to match your brand using CSS custom properties.

CSS Custom Properties

Override these CSS custom properties on the capwave-uploader element to customize colors and layout:

Colors

Property Default Description
--capwave-bg #FFFFFF Widget background color
--capwave-text #1A1C52 Primary text color
--capwave-border #5D54DE Dropzone border and progress bar color
--capwave-highlight #2A338A Title highlight and hover states
--capwave-button-bg #1A1C52 Upload button background
--capwave-button-text #FFFFFF Upload button text color
--capwave-shadow rgba(12, 12, 13, 0.4) Shadow color for card and button
--capwave-error #DC2626 Error state color
--capwave-success #16A34A Success state color

Layout

Property Default Description
--capwave-max-width none Maximum widget width
--capwave-min-width 280px Minimum widget width
--capwave-border-radius 30px Container border radius
--capwave-padding 18px Container padding

Example: Custom Brand Colors

<style>
  /* Green-themed widget */
  capwave-uploader {
    --capwave-border: #22c55e;
    --capwave-highlight: #16a34a;
    --capwave-button-bg: #166534;
    --capwave-shadow: rgba(22, 101, 52, 0.3);
  }

  /* You can also scope to specific widgets */
  #my-widget capwave-uploader {
    --capwave-border-radius: 16px;
  }
</style>

<div id="my-widget">
  <div data-capwave-upload data-partner-id="demo"></div>
</div>

See the Custom Theme example for a live demo.

Style Isolation

The widget uses Shadow DOM to encapsulate its styles. This means:

  • Widget styles won't leak into your page
  • Your page styles won't affect the widget (except CSS custom properties)
  • CSS custom properties are the only way to customize appearance
Note: If you need deeper customization than CSS properties allow, please contact us.