---
url: https://docs.youcan.shop/youcan-pay/yp-js/appearance.md
---
# yp.js: Appearance

The form is a `<yp-root>` custom element. It renders in a shadow DOM, so your page styles do not leak into it. You theme it in three ways: the `appearance` option, CSS custom properties, and shadow parts. The default theme is light with a blue accent.

## Appearance Option

Pass `appearance` to `elements()`. It has two fields.

| Field | Type | Description |
| --- | --- | --- |
| `variables` | `object`, optional | Design tokens. Each key maps to a `--yp-` custom property. `{ primary: '#335cff' }` sets `--yp-primary`. |
| `rules` | `string`, optional | Raw CSS applied inside the form. Use it for fine styling that the tokens do not cover. |

```js
yp('pub_xxx').elements({
  token: 'token_xxx',
  container: '#payment',
  appearance: {
    variables: {
      'primary': '#335cff',
      'radius': '12px',
      'font': 'Poppins, sans-serif',
    },
    rules: `[part="button"] { text-transform: uppercase; }`,
  },
});
```

## Custom Properties

Set any `--yp-*` property on the `yp-root` element to override a token.

| Property | Description |
| --- | --- |
| `--yp-primary` | Accent color for buttons and focus. |
| `--yp-primary-hover` | Accent color on hover. |
| `--yp-primary-foreground` | Text color on the accent. |
| `--yp-background` | Form background. |
| `--yp-card` | Card surface. |
| `--yp-foreground` | Main text color. |
| `--yp-muted-foreground` | Secondary text color. |
| `--yp-border` | Border color. |
| `--yp-destructive` | Error color. |
| `--yp-success` | Success color. |
| `--yp-ring` | Focus ring color. |
| `--yp-radius` | Corner radius. `--yp-radius-sm` and `--yp-radius-lg` follow it. |
| `--yp-font` | Font family. |

```css
yp-root {
  --yp-primary: #335cff;
  --yp-radius: 12px;
}
```

## Shadow Parts

Target inner elements from your page with `::part()`.

```css
yp-root::part(input) {
  border-width: 2px;
}

yp-root::part(button) {
  letter-spacing: 0.02em;
}
```

Available parts: `widget`, `selector`, `form`, `field`, `label`, `input`, `hint`, `error`, `button`, `dialog`, `overlay`, `loader`, `help`, `guide`, `sandbox`, `code`.

## Dark Theme

Set `data-theme="dark"` on the `yp-root` element. The form reads it and switches. The element is created during `mount()`, so set the attribute after the `ready` event.

```js
const payment = yp('pub_xxx').elements({ token: 'token_xxx', container: '#payment' });

payment.on('ready', () => {
  document.querySelector('#payment yp-root').setAttribute('data-theme', 'dark');
});

payment.mount();
```