---
title: Theming
description: Style every Lockerverse React component with one token set.
sidebar:
  order: 5
---

Use `theme="light"` or `theme="dark"` for the base palette. Pass one
`LockerverseStyle` object to payment, signup, and donate launcher components.

```tsx
import type { LockerverseStyle } from "@lockerverse/react";

const style = {
  "--lockerverse-accent": "#f1511b",
  "--lockerverse-bg": "#fffaf0",
  "--lockerverse-border": "#d9cbb7",
  "--lockerverse-control": "#f5eddf",
  "--lockerverse-radius": "14px",
  "--lockerverse-text": "#211c17",
} satisfies LockerverseStyle;

<LockerversePayment style={style} {...paymentProps} />
<LockerverseSignup style={style} {...signupProps} />
<LockerverseDonateLauncher style={style} {...launcherProps} />
```

## Tokens

| Token | Controls |
| --- | --- |
| `--lockerverse-accent` | Buttons, focus rings, and selected controls |
| `--lockerverse-accent-contrast` | Text on the accent color |
| `--lockerverse-bg` | Component surface |
| `--lockerverse-border` | Dividers and control borders |
| `--lockerverse-control` | Input and option surfaces |
| `--lockerverse-danger` | Validation and failure states |
| `--lockerverse-font-family` | Component typography |
| `--lockerverse-muted` | Secondary text |
| `--lockerverse-placeholder` | Placeholder text |
| `--lockerverse-radius` | Cards, inputs, and buttons |
| `--lockerverse-subtle` | Quiet backgrounds and separators |
| `--lockerverse-text` | Primary text |

Existing `--lockerverse-signup-*` tokens remain supported as aliases. Use the
canonical tokens for new integrations.

[Open the live theme workbench](/examples/theming).