Skip to main content

Theme Editor

The Theme Editor lets you customize the appearance of your consent banner and preferences dialog to match your brand.

Admin Access Required

The Theme Editor is only available to users with admin permissions.

Accessing the theme editor

  1. Navigate to Themes in the sidebar (admin menu)
  2. Select the site to customize
  3. The theme editor opens with a live preview

Theme properties

Colors

PropertyDescription
PrimaryMain action buttons (Accept)
SecondarySecondary actions (Preferences)
BackgroundBanner/dialog background
TextPrimary text color
BorderBorder colors
RejectReject button color

Typography

PropertyDescription
Font familyPrimary font stack
Heading sizeTitle text size
Body sizeDescription text size
Button sizeButton text size

Layout

PropertyDescription
Border radiusCorner rounding
PaddingInternal spacing
ShadowDrop shadow intensity
Max widthMaximum banner width

Using the visual editor

The visual editor provides:

  • Color pickers: Click any color to open the picker
  • Sliders: Adjust sizes and spacing
  • Live preview: See changes in real-time
  • Device toggle: Preview mobile and desktop

CSS overrides

For advanced customization, add custom CSS:

.dw-cmp-banner {
font-family: 'Your Font', sans-serif;
}

.dw-cmp-accept-btn {
background: linear-gradient(45deg, #your-color-1, #your-color-2);
}

Add custom CSS in Themes → Advanced → Custom CSS.

Theme presets

Start with a preset and customize:

  • Light: Clean, minimal light theme
  • Dark: Dark mode compatible
  • Accessible: High contrast, large text
  • Minimal: Subtle, unobtrusive

Saving and publishing

  1. Make your changes in the editor
  2. Click Preview to test in a sandbox
  3. Click Save Draft to save without publishing
  4. Click Publish to push changes live

Published themes take effect within 60 seconds.

Theme versioning

Each theme change is versioned:

  • View history in Themes → History
  • Compare versions side-by-side
  • Rollback to any previous version

Multi-site themes

Share themes across sites:

  1. Create a theme in one site
  2. Click Save as Template
  3. Apply to other sites from Themes → Templates

Accessibility

Ensure your theme meets WCAG guidelines:

  • Contrast ratio: Minimum 4.5:1 for text
  • Focus indicators: Visible keyboard focus
  • Text sizing: Respects user preferences

The editor shows accessibility warnings for common issues.

Next steps