> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/forms/manage-forms/css-variables.md).

# CSS variables

ACPT forms are styled entirely through [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_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.

{% hint style="info" %}
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.
{% endhint %}