CSS variables

ACPT forms are styled entirely through CSS custom properties. You can override them per-form without touching a stylesheet — expand the CSS variables panel in the form settings and set a value for the light and dark colour schemes.

When you save custom values, ACPT injects an inline <style> block scoped to :root on any page that renders the form. The dark-mode values are applied automatically when the visitor's OS preference matches @media (prefers-color-scheme: dark).

---

Variable reference

Each row shows the setting key (as stored in the form metadata), the CSS variable it controls, and the default values shipped in front-end.css.

Spacing

Setting key	CSS variable	Default (light)	Default (dark)
half_gap	--acpt-half-gap	4px	4px
gap	--acpt-gap	8px	8px

Border

Setting key	CSS variable	Default (light)	Default (dark)
border_thickness	--acpt-border-thickness	1px	1px
border_radius	--acpt-border-radius	4px	4px
border_color	--acpt-border-color	#777	#434343

Typography

Setting key	CSS variable	Default (light)	Default (dark)
label_font_weight	--acpt-label-font-weight	bold	bold
label_color	--acpt-label-color	#434343	#ffffff

Inputs

Setting key	CSS variable	Default (light)	Default (dark)
input_bg	--acpt-input-bg	#ffffff	#2c3338
input_color	--acpt-input-color	#777	#ffffff

Colours

Setting key	CSS variable	Default (light)	Default (dark)	Used for
primary_color	--acpt-primary-color	#007cba	#007cba	Focused inputs, interactive elements
primary_hover_color	--acpt-primary-hover-color	#006191	#006191	Hover state on primary elements
success_color	--acpt-success-color	#02c39a	#02c39a	Success / submit button
warning_color	--acpt-warning-color	#b7922c	#b7922c	Warning alerts
error_color	--acpt-error-color	#c62d2d	#c62d2d	Validation errors
gray_color	--acpt-gray-color	#dddddd	#dddddd	Dividers, disabled states
light_gray_color	--acpt-light-gray-color	#f6f7f7	#f6f7f7	Subtle backgrounds
button_color	--acpt-button-color	#ffffff	#ffffff	Button text colour

---

How overrides are applied

Only the variables you explicitly set are overridden; unset variables keep their defaults from front-end.css. Both a light value and a dark value must be provided for a variable — if you only need one colour scheme, enter the same value in both fields.

CSS variable overrides are per-form. If you embed the same form on multiple pages, all instances share the same overrides. To style two instances differently, create separate forms.