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​