> ## 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.
# PrimerCheckoutTheme
> Root design-token override container for the checkout UI
Primer Checkout iOS SDK is currently in **beta** (v3.0.0-beta.1).
The API is subject to change before the stable release.
`PrimerCheckoutTheme` is the single container for design-token overrides. Pass it to the entry-point APIs to restyle the checkout UI without replacing Primer's internal token system.
Internally, the SDK ships auto-generated `DesignTokens` (light) and `DesignTokensDark` (dark) values that remain the source of truth. When you supply a `PrimerCheckoutTheme`, the SDK merges your overrides on top of those defaults — any `nil` value falls back to the internal default. You only set the tokens you want to change.
Every override property is optional. A `PrimerCheckoutTheme()` with no arguments applies the SDK's default appearance, so you can start from the defaults and override one group, or one token, at a time.
## Declaration
```swift theme={"dark"}
@available(iOS 15.0, *)
public struct PrimerCheckoutTheme: Equatable
```
## Initializer
```swift theme={"dark"}
public init(
colors: ColorOverrides? = nil,
radius: RadiusOverrides? = nil,
spacing: SpacingOverrides? = nil,
sizes: SizeOverrides? = nil,
typography: TypographyOverrides? = nil,
borderWidth: BorderWidthOverrides? = nil
)
```
### Parameters
| Parameter | Type | Default | Description |
| ------------- | ------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| `colors` | [`ColorOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/color-tokens) | `nil` | Color token overrides. `nil` uses internal defaults. |
| `radius` | [`RadiusOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) | `nil` | Corner radius token overrides. `nil` uses internal defaults. |
| `spacing` | [`SpacingOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/spacing-tokens) | `nil` | Spacing (padding and margin) token overrides. `nil` uses internal defaults. |
| `sizes` | [`SizeOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) | `nil` | Size token overrides for icons and touch targets. `nil` uses internal defaults. |
| `typography` | [`TypographyOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/typography-tokens) | `nil` | Typography token overrides (font, weight, size, line height, letter spacing). `nil` uses internal defaults. |
| `borderWidth` | [`BorderWidthOverrides?`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) | `nil` | Border width token overrides. `nil` uses internal defaults. |
## Properties
`PrimerCheckoutTheme` is `Equatable` and exposes one immutable property per override group. Each is the optional value you passed to the initializer.
| Property | Type | Description |
| ------------- | ----------------------- | -------------------------------------------------------- |
| `colors` | `ColorOverrides?` | The color token overrides, or `nil` for defaults. |
| `radius` | `RadiusOverrides?` | The radius token overrides, or `nil` for defaults. |
| `spacing` | `SpacingOverrides?` | The spacing token overrides, or `nil` for defaults. |
| `sizes` | `SizeOverrides?` | The size token overrides, or `nil` for defaults. |
| `typography` | `TypographyOverrides?` | The typography token overrides, or `nil` for defaults. |
| `borderWidth` | `BorderWidthOverrides?` | The border width token overrides, or `nil` for defaults. |
## Token groups
A theme is made up of six override groups. Each group is its own optional struct whose properties are all optional, so you only specify the tokens you want to change. The four documentation pages below cover the full property list, types, and defaults for every group.
| Group | Override type | Covers | Reference |
| ------------ | ---------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Colors | `ColorOverrides` | Brand, grays, semantic, text, border, icon, and state colors | [Color tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/color-tokens) |
| Spacing | `SpacingOverrides` | Padding and margin scale | [Spacing tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/spacing-tokens) |
| Typography | `TypographyOverrides` | Title and body text styles | [Typography tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/typography-tokens) |
| Radius | `RadiusOverrides` | Corner radius scale | [Shape tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) |
| Sizes | `SizeOverrides` | Icon and touch-target sizes | [Shape tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) |
| Border width | `BorderWidthOverrides` | Thin, medium, and thick border widths | [Shape tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) |
The [Shape tokens](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens) page documents three groups together: `RadiusOverrides`, `SizeOverrides`, and `BorderWidthOverrides`.
## Applying a theme
`PrimerCheckoutTheme` is accepted by all three entry points. The managed view and the UIKit presenter take it as `primerTheme`; the session takes it as `theme`.
| Entry point | Parameter | Reference |
| ----------------------------------------------- | ------------- | -------------------------------------------------------------------------------------- |
| `PrimerCheckout` (SwiftUI managed view) | `primerTheme` | [PrimerCheckout](/docs/sdk/ios-checkout/v3.0.0-beta/api/primer-checkout) |
| `PrimerCheckoutSession` (custom SwiftUI layout) | `theme` | [PrimerCheckoutSession](/docs/sdk/ios-checkout/v3.0.0-beta/api/primer-checkout-session) |
| `PrimerCheckoutPresenter` (UIKit) | `primerTheme` | [PrimerCheckoutPresenter](/docs/sdk/ios-checkout/v3.0.0-beta/api/primer-checkout-presenter) |
### With the managed view
```swift theme={"dark"}
import SwiftUI
import PrimerSDK
struct CheckoutView: View {
let clientToken: String
var body: some View {
PrimerCheckout(
clientToken: clientToken,
primerTheme: brandTheme
)
}
}
```
### With a custom layout
```swift theme={"dark"}
import SwiftUI
import PrimerSDK
struct CustomCheckoutView: View {
@StateObject private var session: PrimerCheckoutSession
init(clientToken: String) {
_session = StateObject(
wrappedValue: PrimerCheckoutSession(
clientToken: clientToken,
theme: brandTheme
)
)
}
var body: some View {
ScrollView {
PrimerPaymentMethods()
PrimerCardForm()
}
.primerCheckoutSession(session) { state in
// React to the terminal state.
}
}
}
```
## Theme example
Build a theme by composing the override groups. Each group only sets the tokens you care about; everything else inherits the SDK defaults.
```swift theme={"dark"}
import SwiftUI
import PrimerSDK
let brandTheme = PrimerCheckoutTheme(
colors: ColorOverrides(
primerColorBrand: Color(red: 0.91, green: 0.51, blue: 0.47),
primerColorBackground: .white,
primerColorTextPrimary: Color(white: 0.1)
),
radius: RadiusOverrides(
primerRadiusMedium: 12,
primerRadiusLarge: 16
),
spacing: SpacingOverrides(
primerSpaceMedium: 16,
primerSpaceLarge: 20
),
typography: TypographyOverrides(
titleLarge: TypographyOverrides.TypographyStyle(
font: "Inter",
weight: .semibold,
size: 18,
lineHeight: 24
),
bodyMedium: TypographyOverrides.TypographyStyle(
font: "Inter",
weight: .regular,
size: 14,
lineHeight: 20
)
),
borderWidth: BorderWidthOverrides(
primerBorderWidthThin: 1,
primerBorderWidthMedium: 2
)
)
```
Start small. Override `primerColorBrand` alone and Primer's default tokens fill in the rest of the palette, then layer in additional tokens as your branding requires.
## See also
Override brand, semantic, text, border, and icon colors.
Customize title and body text styles.
Tune padding and margin values.
Radius, size, and border-width overrides.