How do I customize the banner colors and position? Default blue doesn't match my brand.

[zapalblizh]

Love the library, but the default banner styling clashes with my site's dark theme. I see zest.config.js in the docs — can I override the banner position (I want it bottom-left) and change the accent color to my brand orange? A code snippet would help.

[reatlat]

Yes, Zest is fully customizable. Banner position, colors, theme, buttons — all configurable from a single object with zero CSS required.

Banner position

window.ZestConfig = {
  position: 'bottom-left'  // 'bottom', 'bottom-left', 'bottom-right',
                           // 'top', 'top-left', 'top-right', 'center'
};

Full position reference: Styling docs → Banner Position

Accent color

window.ZestConfig = {
  accentColor: '#f97316'  // orange (#f97316), hex, rgb(), hsl(), named — anything valid
};

This colors the Accept All button, toggle switches, and focus rings. Full reference: Styling docs → Accent Color

Full dark-theme example

Here's a complete config for a bottom-left orange banner with dark mode:

window.ZestConfig = {
  position: 'bottom-left',
  theme: 'dark',
  accentColor: '#f97316',
  buttonStyle: 'fill',
  buttonLayout: 'split',
  policyUrl: '/privacy-policy'
};

Deeper CSS overrides

If you need more than the built-in options, use customStyles to inject raw CSS into Zest's Shadow DOM:

window.ZestConfig = {
  accentColor: '#f97316',
  customStyles: `
    .zest-banner {
      border-top: 3px solid var(--zest-accent);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }
    .zest-btn {
      font-family: 'Inter', sans-serif;
    }
  `
};

🎮 Interactive Playground

The fastest way to experiment is the live playground at cookiezest.com — it lets you tweak position, colors, theme, button style, layout, backdrop blur, and hard wall in real time and generates the config code for you. Way faster than trial-and-error in your own codebase.

Full customization docs: cookiezest.com/docs/styling/