# ClerkTheme

The `ClerkTheme` is used to customize the appearance of Clerk iOS views by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk views.

## Structure

`ClerkTheme` consists of three main properties:

- **`colors`** - Color properties for various UI elements.
- **`fonts`** - Font properties for different text styles.
- **`design`** - Design properties like border radius.

## Colors

The `colors` property contains the following color options:

| Name              | Type  | Description                                                               |
| ----------------- | ----- | ------------------------------------------------------------------------- |
| primary           | Color | The primary color used throughout the views.                              |
| background        | Color | The background color for containers.                                      |
| input             | Color | The background color used for input fields.                               |
| danger            | Color | The color used for error states.                                          |
| success           | Color | The color used for success states.                                        |
| warning           | Color | The color used for warning states.                                        |
| foreground        | Color | The color used for text.                                                  |
| mutedForeground   | Color | The color used for secondary text.                                        |
| primaryForeground | Color | The color used for text on the primary background.                        |
| inputForeground   | Color | The color used for text in input fields.                                  |
| neutral           | Color | The color that will be used to generate the neutral shades the views use. |
| ring              | Color | The color of the ring when an interactive element is focused.             |
| muted             | Color | The color used for muted backgrounds.                                     |
| shadow            | Color | The base shadow color used in the views.                                  |
| border            | Color | The base border color used in the views.                                  |

## Fonts

The `fonts` property contains the following font options based on iOS Dynamic Type:

| Name        | Type | Description |
| ----------- | ---- | ----------- |
| largeTitle  | Font |             |
| title       | Font |             |
| title2      | Font |             |
| title3      | Font |             |
| headline    | Font |             |
| subheadline | Font |             |
| body        | Font |             |
| callout     | Font |             |
| footnote    | Font |             |
| caption     | Font |             |
| caption2    | Font |             |

## Design

The `design` property contains the following design options:

| Name         | Type    | Description                                                                  |
| ------------ | ------- | ---------------------------------------------------------------------------- |
| borderRadius | CGFloat | The border radius used throughout the views. By default, this is set to 6.0. |

## Usage

You can customize Clerk iOS views by creating a `ClerkTheme` and applying it to the SwiftUI environment.

### Apply a custom theme to all Clerk views

To customize all Clerk views in your app, create a `ClerkTheme` and apply it to your root view using the environment.

```swift
import SwiftUI
import Clerk

struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .environment(\.clerkTheme, customTheme)
    }
  }

  let customTheme = ClerkTheme(
    colors: .init(
      primary: .blue,
    ),
    design: .init(
      borderRadius: 12.0
    )
  ) 
}
```

### Apply a theme to specific views

You can apply a theme to specific Clerk views by using the environment modifier on individual views. The theme used here will apply to all children of this view.

```swift
struct SignInView: View {
  var body: some View {
    AuthView()
      .environment(\.clerkTheme, customTheme)
  }

  let customTheme = ClerkTheme(
    colors: .init(
      primary: .purple,
    )
  )
}
```

### Adjust a specific property of the theme

You can adjust a specific property of the theme by modifying a single property.

```swift
struct SignInView: View {
  var body: some View {
    AuthView()
      .environment(\.clerkTheme.colors.primary, .green)
  }
}
```

### Custom fonts

You can customize fonts by providing a font family name or individual font specifications.

#### Using a font family name

```swift
struct CustomFontView: View {
  var body: some View {
    AuthView()
      .environment(\.clerkTheme, customTheme)
  }

  let customTheme = ClerkTheme(
    fonts: .init(fontFamily: "Helvetica Neue")
  )
}
```

#### Using individual font specifications

```swift
struct CustomFontView: View {
  var body: some View {
    AuthView()
      .environment(\.clerkTheme, customTheme)
  }

  let customTheme = ClerkTheme(
    fonts: .init(
      largeTitle: .init(name: "Helvetica Neue", size: 34.0),
      title: .init(name: "Helvetica Neue", size: 28.0),
      title2: .init(name: "Helvetica Neue", size: 22.0),
      title3: .init(name: "Helvetica Neue", size: 20.0),
      headline: .init(name: "Helvetica Neue", size: 18.0),
    )
  )
}
```

## Light and dark mode support

Clerk iOS views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.

<div style="{ display: 'flex', gap: '20px', alignItems: 'flex-start' }">
</div>

### Using Asset Catalog Colors

For more sophisticated appearance support, create colors in your Asset Catalog with separate light and dark variants:

```swift
extension ClerkTheme {
  static let brandTheme = ClerkTheme(
    colors: .init(
      primary: Color(.brandPrimary), // Asset with light/dark variants
      background: Color(.brandBackground),
      foreground: Color(.brandText),
      danger: Color(.brandDanger)
    )
  )
}
```

If Clerk's prebuilt theming doesn't meet your specific needs, you can create completely custom authentication flows using the Clerk API. See the [SDK docs](https://clerk.com/docs/ios/reference/native-mobile/overview.md).

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)