> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Tokens Explorer — iOS

> Explore PrimerCheckoutTheme tokens and see which components they affect, with live Swift code generation.

Explore how `PrimerCheckoutTheme` tokens affect different parts of the iOS Checkout. Select a token to see which components it impacts, adjust values with sliders and color pickers, and copy the generated Swift code directly into your project.

> [!NOTE]
>
> This explorer showcases a subset of tokens from `PrimerCheckoutTheme`. For a complete reference, see the [Theming](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme.md) page.

iOS Preview

Card number

4242 4242 4242 4242

Expiry

MM/YY

CVV

123

Pay \$49.99

Generated Swift Code

<pre />

Affected

Selected

***

## How to Use

1. **Token → Components mode**: Click a token to see which parts of the checkout it affects (highlighted in green)
2. **Component → Tokens mode**: Click a component to see which tokens control its appearance
3. **Adjust values**: Use the sliders and color pickers to preview changes in real-time
4. **Copy generated code**: The Swift code updates live — copy it directly into your project

***

## Applying Tokens in Your Code

Once you've configured your theme, apply it when creating `PrimerCheckout`:

```swift theme={"dark"}
let theme = PrimerCheckoutTheme(
  colors: ColorOverrides(
    primerColorBrand: Color(red: 0.49, green: 0.36, blue: 0.75)
  ),
  radius: RadiusOverrides(
    primerRadiusMedium: 12
  )
)

PrimerCheckout(
  clientToken: clientToken,
  primerTheme: theme
)
```

> [!NOTE]
>
> `colors` applies in light mode only. To theme dark mode, pass the same kind of `ColorOverrides` as `darkColors`. Any color you leave out of `darkColors` uses Primer's dark default, not your light value. See [Theming](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme.md).

***

## Related

* [Theming](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme.md) — Theming API reference
* [Card Form Layout Builder](https://primer.io/docs/checkout/primer-checkout/build-your-ui/card-form-layout-builder.md) — Build card form layouts
* [Architecture Explorer](https://primer.io/docs/checkout/primer-checkout/build-your-ui/scope-architecture-explorer-ios.md) — Explore the composable view and slot hierarchy


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.