Theming
Style every Lockerverse React component with one token set.
Use theme="light" or theme="dark" for the base palette. Pass one
LockerverseStyle object to payment, signup, and donate launcher components.
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.