# Styles & Fonts

Customize the visual appearance of the embedded payment form using the `styles` and `fonts` options passed to [Finix.PaymentForm()](/js/payment-form).

To adjust the overall theme, see the `theme` and `enableDarkMode` options in the Appearance section on the [Options API Reference](/js/options) page.

## Styles

Use the `styles` option to match the payment form to your brand. Styles are organized by **theme** (`default` or `dark`), then by **element**, then by **state**.


```js
styles: {
  default: { /* base (light) theme */ },
  dark:    { /* optional dark mode overrides */ }
}
```

- `default` — your baseline styles, applied in all conditions.
- `dark` — overrides applied on top of `default` when dark mode is active.
- You only need to include the properties you want to customize.


**Available targets and states:**

| Target | Supported states |
|  --- | --- |
| `form` | `default`, `error`, `success`, `focused` |
| `input` | `default`, `error`, `success`, `focused` |
| `sectionHeader` | `default`, `focused` |
| `section` | `default` |
| `submitButton` | `default`, `disabled` |


Style values are plain CSS-in-JS objects. For example, to change the input error color in light mode:


```js
styles.default.input.error.color = "red"
```

Or to change the submit button background in dark mode:


```js
styles.dark.submitButton.default.backgroundColor = "green"
```

**How theming and state styling works:**

- The form starts with `styles.default`.
- If dark mode is active, `styles.dark` is layered on top.
- State styles (`focused`, `error`, `disabled`) layer on top of the element's `default` style.


Use `styles.default.input` to style the payment input fields. The `input` target supports `default`, `error`, `success`, and `focused` states.

Prioritize these states for the best buyer experience:

- `input.error` — highlight invalid fields.
- `input.focused` — highlight the active field.
- `submitButton.disabled` — style the button when submission is unavailable.
- `sectionHeader.focused` — highlight the selected payment method.


Set `enableDarkMode: true` to enable dark mode. When active, the user's system preference (`prefers-color-scheme: dark`) determines which theme is applied.

Define your complete brand look in `styles.default`, then add only the differences in `styles.dark`.

## Fonts

Load custom fonts inside the form iframe using the `fonts` option. Pass an array of font objects to register fonts that can then be applied via `styles`.

**Type:** `array[object]`