Docs navigation

Theming

The appearance prop controls visual customization. Use colorScheme to select light or dark, and variables to override individual CSS tokens.

Color scheme

<CancelFlow
  appearance={{ colorScheme: 'auto' }}
  steps={steps}
  handleCancel={handleCancel}
/>

colorScheme accepts 'light', 'dark', or 'auto'. 'auto' follows the OS preference via prefers-color-scheme and updates live when it changes. Defaults to 'light'.

CSS variables

Override design tokens through appearance.variables. Values cascade on top of the active scheme, so setting colorPrimary once works in both light and dark.

<CancelFlow
  appearance={{
    variables: {
      colorPrimary: '#7c3aed',
      colorPrimaryHover: '#6d28d9',
      borderRadius: '12px',
      fontFamily: 'Inter, system-ui, sans-serif',
    },
  }}
  steps={steps}
  handleCancel={handleCancel}
/>

The complete list, grouped by what they affect:

Surfaces

Variable	What it controls
`colorBackground`	Page background behind the modal.
`colorSurface`	Modal surface and card backgrounds.
`colorSurfaceMuted`	Secondary surfaces (info banners, soft callouts).

Borders

Variable	What it controls
`colorBorder`	Default borders, dividers, separator lines.
`colorBorderStrong`	Emphasized borders (selected reasons, focus rings).

Text

Variable	What it controls
`colorText`	Default body text.
`colorTextSecondary`	Description text, subheadings, secondary copy.
`colorTextMuted`	Tertiary text (helper text, captions).

Primary (brand accent)

Variable	What it controls
`colorPrimary`	Buttons, selected reasons, accents.
`colorPrimaryHover`	Hover state for primary buttons.
`colorPrimarySoft`	Tinted backgrounds and highlights (selected reason fills, info banner backgrounds).

Semantic

Variable	What it controls
`colorSuccess`	Success outcome state.
`colorSuccessSoft`	Tinted background for success surfaces.
`colorDanger`	Cancel button, destructive states.
`colorDangerHover`	Hover state for danger buttons.
`colorDangerSoft`	Tinted background for error surfaces.

Typography

Variable	What it controls
`fontFamily`	Body text.
`fontFamilyMono`	Monospaced text (currency codes, ID labels).
`fontFamilyDisplay`	Headings and step titles. Defaults to `fontFamily`.
`fontSize`	Base font size.
`fontWeightDisplay`	Weight applied to step titles. Default `'600'`.
`letterSpacingDisplay`	Letter spacing on step titles. Default `'-0.015em'`.

Geometry

Variable	What it controls
`borderRadius`	Default radius on buttons, cards, inputs.
`radiusSm`	Tighter radius for chips and small controls.
`radiusMd`	Medium radius for cards and inputs.
`radiusLg`	Larger radius for prominent surfaces.
`radiusXl`	Modal surface radius.

Elevation

Variable	What it controls
`shadowModal`	Drop shadow on the modal surface.
`shadowCard`	Drop shadow on inner cards (plan rows, info callouts).

Overlay

Variable	What it controls
`overlayColor`	Color of the modal backdrop. Defaults to a neutral translucent ink. Accepts any CSS color, including `color-mix` expressions to derive from the primary.

Variables forward to the DOM as --ck-* custom properties on .ck-cancel-flow. To set them from CSS instead of the appearance prop, target that selector:

.ck-cancel-flow {
  --ck-color-primary: #7c3aed;
  --ck-border-radius: 12px;
}

Dark mode

colorPrimary set once applies to both schemes. If your brand color has poor contrast against the SDK's dark-mode surface, swap it per scheme by reading prefers-color-scheme from your app:

function CancelButton() {
  // Your app's prefers-color-scheme hook.
  const isDark = useMediaQuery('(prefers-color-scheme: dark)')
 
  return (
    <CancelFlow
      appearance={{
        colorScheme: 'auto',
        variables: {
          colorPrimary: isDark ? '#a5b4fc' : '#6366f1',
        },
      }}
      steps={steps}
      handleCancel={handleCancel}
    />
  )
}

Next steps

classNames — when variables aren't surgical enough.
Replacing components — when CSS isn't enough.