āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/ios/clerk-theme ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
ClerkTheme'
description: Utilize Clerk's ClerkTheme to adjust the general styles of the iOS components, like colors, fonts, and design properties.
sdk: iosThe 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.
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.The colors property contains the following color options:
The primary color used throughout the components.
backgroundColorThe background color for containers.
inputColorThe background color used for input fields.
dangerColorThe color used for error states.
successColorThe color used for success states.
warningColorThe color used for warning states.
foregroundColorThe color used for text.
mutedForegroundColorThe color used for secondary text.
primaryForegroundColorThe color used for text on the primary background.
inputForegroundColorThe color used for text in input fields.
neutralColorThe color that will be used to generate the neutral shades the components use.
ringColorThe color of the ring when an interactive element is focused.
mutedColorThe color used for muted backgrounds.
shadowColorThe base shadow color used in the components.
borderColorThe base border color used in the components. </Properties>
The fonts property contains the following font options based on iOS Dynamic Type:
titleFonttitle2Fonttitle3FontheadlineFontsubheadlineFontbodyFontcalloutFontfootnoteFontcaptionFontcaption2Font
</Properties>
The design property contains the following design options:
The border radius used throughout the components. By default, this is set to 6.0.
</Properties>
You can customize Clerk iOS components by creating a ClerkTheme and applying it to the SwiftUI environment.
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
)
)
}
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,
)
)
}
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)
}
}
You can customize fonts by providing a font family name or individual font specifications.
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),
)
)
}
Clerk iOS components 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' }}> {{ style: { maxWidth: '230px' } }} {{ style: { maxWidth: '230px' } }} </div>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),
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. For more information, see the custom flow guides.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā