ClerkTheme
The ClerkTheme is used to customize the appearance of Clerk iOS components 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 components.
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
primary- Type
Color- Description
The primary color used throughout the components.
- Name
background- Type
Color- Description
The background color for containers.
- Name
inputBackground- Type
Color- Description
The background color used for input fields and text areas.
- Name
danger- Type
Color- Description
The color used for error states and destructive actions.
- Name
success- Type
Color- Description
The color used for success states and positive feedback.
- Name
warning- Type
Color- Description
The color used for warning states and caution messages.
- Name
text- Type
Color- Description
The primary text color used throughout the components.
- Name
textSecondary- Type
Color- Description
The secondary text color used for less prominent text elements.
- Name
textOnPrimaryBackground- Type
Color- Description
The text color used when text appears on the primary background color.
- Name
inputText- Type
Color- Description
The text color used within input fields and text areas.
- Name
neutral- Type
Color- Description
The neutral color used for borders, dividers, and subtle UI elements.
Fonts
The fonts property contains the following font options based on iOS Dynamic Type:
- Name
largeTitle- Type
Font- Description
The largest title font style, typically used for main headings.
- Name
title- Type
Font- Description
The standard title font style for primary headings.
- Name
title2- Type
Font- Description
The secondary title font style for subheadings.
- Name
title3- Type
Font- Description
The tertiary title font style for smaller headings.
- Name
headline- Type
Font- Description
The headline font style for prominent text and section headers.
- Name
subheadline- Type
Font- Description
The subheadline font style for secondary headers and captions.
- Name
body- Type
Font- Description
The body font style for main content text.
- Name
callout- Type
Font- Description
The callout font style for highlighted text and important notices.
- Name
footnote- Type
Font- Description
The footnote font style for supplementary text.
- Name
caption- Type
Font- Description
The caption font style for small descriptive text.
- Name
caption2- Type
Font- Description
The smallest caption font style for minimal text elements.
Design
The design property contains the following design options:
- Name
borderRadius- Type
CGFloat- Description
The border radius used for rounded corners on buttons, cards, and input fields. Defaults to
6.0.
Usage
You can customize Clerk iOS components by creating a ClerkTheme and applying it to the SwiftUI environment.
Apply a custom theme to all Clerk components
To customize all Clerk components in your app, create a ClerkTheme and apply it to your root view using the environment.
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 components
You can apply a theme to specific Clerk components by using the environment modifier on individual views. The theme used here will apply to all children of this view.
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.
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
struct CustomFontView: View {
var body: some View {
AuthView()
.environment(\.clerkTheme, customTheme)
}
let customTheme = ClerkTheme(
fonts: .init(fontFamily: "Helvetica Neue")
)
}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 components automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.
Using Asset Catalog Colors
For more sophisticated appearance support, create colors in your Asset Catalog with separate light and dark variants:
extension ClerkTheme {
static let brandTheme = ClerkTheme(
colors: .init(
primary: Color(.brandPrimary), // Asset with light/dark variants
background: Color(.brandBackground),
text: 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. For more information, see the custom flow guides.
Feedback
Last updated on