Custom Theme

Override CSS custom properties to match your brand colors.

Live Preview

This widget uses a green color scheme defined via CSS custom properties:

CSS Code

Add these CSS custom properties to override the default colors:

/* Target the capwave-uploader element */
capwave-uploader {
  --capwave-border: #22c55e;
  --capwave-highlight: #16a34a;
  --capwave-button-bg: #166534;
  --capwave-shadow: rgba(22, 101, 52, 0.3);
}

Available CSS Properties

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

See the Theming guide for the complete list of properties.

Next Steps