Colors & Fonts

Colors

Configure colors in Banner Builder → Appearance → Colors.

CSS variables

ConsentForge exposes CSS custom properties that you can override in your custom CSS:

Variable	Default	Description
--cf-color-primary	#1B3A4B	Primary action color (Accept button)
--cf-color-secondary	#6B7280	Secondary action color (Reject button)
--cf-color-background	#FFFFFF	Banner background
--cf-color-text	#111827	Body text
--cf-color-text-muted	#6B7280	Secondary text
--cf-color-border	#E5E7EB	Border color
--cf-color-overlay	rgba(0,0,0,0.5)	Modal backdrop

Dark mode

ConsentForge automatically follows the visitor's prefers-color-scheme media query. Set data-theme="auto" (default) in your embed snippet, or force data-theme="light" / data-theme="dark".

Fonts

By default, the banner inherits your website's body font via font-family: inherit.

To use a specific font:

/* In your custom CSS */
.cf-banner {
  font-family: 'Inter', sans-serif;
}

Or configure in Banner Builder → Appearance → Font.

Font size

Variable	Default
--cf-font-size-base	14px
--cf-font-size-title	16px
--cf-font-size-small	12px