Personnaliser le style et les thèmes d’Universal Components sur iOS

Découvrez comment personnaliser le style et les thèmes d’Universal Components sur iOS.

Les Universal Components pour iOS d’Auth0 utilisent un modèle de jetons de conception. Les propriétés visuelles, comme les couleurs, la typographie, l’espacement, le rayon des coins et la taille des composants, sont chacune définies par un jeton que vous pouvez remplacer sans modifier vos layouts.

Universal Components comprennent un thème Auth0 par défaut. Vous pouvez fournir votre propre thème afin qu’il corresponde à votre image de marque.

​

Fonctionnement de la personnalisation visuelle

Universal Components pour iOS utilise un thème encapsulé dans une enveloppe de propriété @Environment de SwiftUI. Appliquez le modificateur .auth0Theme(_:) à n’importe quelle vue SwiftUI. Chaque composant enfant affiche automatiquement l’élément Auth0Theme injecté.

​

Aucune configuration

Si vous ne configurez pas de thème, Universal Components pour iOS affiche le thème par défaut d’Auth0. L’exemple suivant affiche le composant MyAccountAuthMethodsView sans aucune personnalisation :

import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
    }
}

Aucune configuration supplémentaire n’est nécessaire pour charger le thème par défaut d’Auth0. Universal Components l’applique automatiquement lorsqu’aucun thème personnalisé n’est fourni.

​

Remplacer un sous-ensemble de jetons

Vous pouvez remplacer certains jetons, tandis qu’Universal Components pour iOS affiche tous les autres à l’aide du thème Auth0 par défaut.

L’exemple suivant remplace uniquement les couleurs principales d’arrière-plan et de texte :

import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
            .auth0Theme(
                Auth0Theme(
                    colors: DefaultAuth0ColorTokens(
                        background: DefaultAuth0BackgroundColorTokens(primary: Color("BrandBlue")),
                        text: DefaultAuth0TextColorTokens(onPrimary: .white)
                    )
                )
            )
    }
}

Il en va de même pour les jetons de typographie, d’espacement, de rayon et de taille.

L’exemple suivant remplace les valeurs de typographie et de rayon des boutons :

Auth0Theme(
    typography: DefaultAuth0TypographyTokens(
        body: Auth0TextStyle(
            font: .custom("Lato-Regular", size: 17),
            tracking: 0,
            lineSpacing: 7
        ),
        label: Auth0TextStyle(
            font: .custom("Lato-Medium", size: 16),
            tracking: 0.1,
            lineSpacing: 5
        )
    ),
    radius: DefaultAuth0RadiusTokens(button: 24)
)

​

Configurer un thème d’image de marque complet

Créez votre propre thème d’image de marque qui définit les propriétés des trois catégories de couleurs, puis intégrez-les dans un conteneur Auth0ColorTokens :

struct BrandBackground: Auth0BackgroundColorTokens {
    var primary: Color { Color("Background/Primary", bundle: .main) }
    var primarySubtle: Color { Color("Background/Primary", bundle: .main).opacity(0.35) }
    var inverse: Color { Color("Background/Inverse", bundle: .main) }
    var accent: Color { Color("Background/Accent", bundle: .main) }
    var layerTop: Color { Color("Background/LayerTop", bundle: .main) }
    var layerMedium: Color { Color("Background/LayerMedium", bundle: .main) }
    var layerBase: Color { Color("Background/LayerBase", bundle: .main) }
    var error: Color { Color("Background/Error", bundle: .main) }
    var errorSubtle: Color { Color("Background/ErrorSubtle", bundle: .main).opacity(0.35) }
    var success: Color { Color("Background/Success", bundle: .main) }
    var successSubtle: Color { Color("Background/SuccessSubtle", bundle: .main) }
}

struct BrandColors: Auth0ColorTokens {
    var background: any Auth0BackgroundColorTokens { BrandBackground() }
    var text: any Auth0TextColorTokens { DefaultAuth0TextColorTokens() }
    var border: any Auth0BorderColorTokens { DefaultAuth0BorderColorTokens() }
}

MyAccountAuthMethodsView()
    .auth0Theme(Auth0Theme(colors: BrandColors()))

​

Utiliser le thème dans vos propres vues

Accédez à l’enveloppe de propriété @Environment(\.auth0Theme) pour appliquer les mêmes jetons dans n’importe quelle vue Swift :

struct MyCustomStep: View {
    @Environment(\.auth0Theme) private var theme

    var body: some View {
        VStack(spacing: theme.spacing.md) {
            Text("Almost there!")
                .auth0TextStyle(theme.typography.titleLarge)
                .foregroundStyle(theme.colors.text.bold)

            Button("Continue") { /* ... */ }
                .frame(height: theme.sizes.buttonHeight)
                .background(theme.colors.background.primary)
                .cornerRadius(theme.radius.button)
        }
        .padding(theme.spacing.md)
    }
}

​

Référence des jetons

Couleurs — Auth0ColorTokens

Les couleurs sont réparties dans trois protocoles spécialisés : Auth0BackgroundColorTokens, Auth0TextColorTokens et Auth0BorderColorTokens. Ils sont regroupés dans le protocole Auth0ColorTokens.

Toutes les ressources de couleur sont adaptatives. Le catalogue de ressources gère automatiquement les modes clair et sombre.

Arrière-plan principal

Jeton	Utilisation
background.primary	Arrière-plan des boutons d’appel à l’action, bordures principales
background.primarySubtle	Arrière-plan principal discret
background.inverse	Arrière-plan à contraste inversé
background.accent	Mise en évidence d’éléments d’UI de marque ou en vedette

Couches d’arrière-plan

Jeton	Utilisation
background.layerTop	Superpositions et fenêtres modales
background.layerMedium	Cartes et conteneurs surélevés
background.layerBase	Arrière-plan principal de l’application

États de rétroaction de l’arrière-plan

Jeton	Utilisation
background.error	Conteneur d’état d’erreur
background.errorSubtle	Bannière d’erreur discrète
background.success	Conteneur d’état de réussite
background.successSubtle	Bannière de réussite discrète

Contenu textuel

Jeton	Utilisation
text.bold	Titres et texte principal
text.regular	Texte secondaire, descriptions, légendes
text.disabled	Texte désactivé et texte indicatif

Texte sur des surfaces colorées

Jeton	Utilisation
text.onPrimary	Texte et icônes sur background.primary
text.onSuccess	Texte et icônes sur background.success
text.onError	Texte et icônes sur background.error, messages de validation

Bordures

Jeton	Utilisation
border.bold	Bordures à contraste élevé ou sélectionnées
border.regular	Bordures de champs de saisie et de cartes
border.subtle	Séparateurs discrets
border.shadow	Bordure d’ombre pour l’élévation

Typographie — Auth0TypographyTokens

Chaque jeton est un Auth0TextStyle qui regroupe font, tracking et lineSpacing. Appliquez-les à l’aide du modificateur de vue .auth0TextStyle(_:).

Jeton	Police de caractères	Taille	Graisse	Hauteur de ligne	Approche	Utilisation
displayLarge	Inter	34 pt	SemiBold	41 pt	−0.20 pt	Titres principaux, inscription de passkey
displayMedium	Inter	28 pt	SemiBold	34 pt	−0.10 pt	Titres d’écran principaux, titres d’erreur
display	Inter	22 pt	SemiBold	28 pt	−0.05 pt	Titres de section
titleLarge	Inter	20 pt	SemiBold	25 pt	0 pt	Titres d’écran, cartes de sous-titres
title	Inter	17 pt	SemiBold	24 pt	0 pt	Titres dans le contenu
body	Inter	17 pt	Regular	24 pt	0 pt	Descriptions, texte courant
bodySmall	Inter	15 pt	Regular	20 pt	+0.10 pt	Texte secondaire, notes de bas de page
label	Inter	16 pt	Medium	21 pt	+0.10 pt	Étiquettes de boutons et de champs de formulaire
helper	Inter	13 pt	Regular	18 pt	+0.20 pt	Légendes, texte d’aide
overline	Inter	11 pt	Regular	16 pt	+0.77 pt	Surtitres et étiquettes de catégorie

Si la police Inter n’est pas incluse dans l’application hôte, SwiftUI utilise automatiquement la police SF Pro.

Espacement — Auth0SpacingTokens

Par défaut, l’espacement repose sur une grille de 4 pt. Utilisez le nom du jeton dans les livrables de conception pour personnaliser l’espacement plutôt que la valeur brute en pixels.

Jeton	Valeur par défaut	Description
xxs	4 pt	Espacement minimal entre des éléments étroitement liés
xs	8 pt	Petit espacement entre des éléments regroupés
sm	12 pt	Marge intérieure moyenne
md	16 pt	Marge intérieure standard des composants et des conteneurs
lg	24 pt	Marge intérieure plus grande pour les sections principales
xl	32 pt	Marge intérieure très grande
xxl	48 pt	Marge intérieure deux fois plus grande
xxxl	56 pt	Marge intérieure trois fois plus grande

Rayon — Auth0RadiusTokens

Jeton	Valeur par défaut	Utilisation
small	8 pt	Cellules de saisie d’un seul caractère (OTP, chiffres du NIP)
medium	12 pt	Cartes de bannière et de rétroaction
inputField	14 pt	Champs de texte, conteneurs d’affichage de code
button	16 pt	Boutons d’appel à l’action, cartes de méthodes d’authentification
pill	24 pt	Boutons à contour en forme de pilule

Tailles — Auth0SizeTokens

Jeton	Valeur par défaut	Utilisation
buttonHeight	48 pt	Tous les boutons d’action principaux et secondaires
inputHeight	60 pt	Champs de texte et de numéro de téléphone
size4xlDimen	48 pt	Largeur d’une cellule de saisie d’un seul caractère
size5xlDimen	56 pt	Hauteur d’une cellule de saisie d’un seul caractère
containerSizeLargeDimen	52 pt	Hauteur d’un conteneur d’affichage de code en lecture seule
iconSmall	16 pt	Petites icônes — chevrons, indicateurs d’information, coches
iconMedium	24 pt	Icônes standard — images de méthodes d’authentification
iconLarge	28 pt	Grandes icônes — menu à trois points

​

En savoir plus

Installer le SDK iOS

Prérequis de la plateforme et installation d’iOS.

Créer une interface libre-service de sécurité des comptes

Initialisez le SDK et reliez le fournisseur de jetons à votre tenant Auth0.