Personnaliser le style et les thèmes d’Universal Components pour Android

Les Universal Components pour Android d’Auth0 utilisent un modèle de jetons de conception. Les propriétés visuelles telles que les couleurs, la typographie, l’espacement, le rayon des coins et la taille des composants sont toutes exprimées sous forme de jetons que vous pouvez remplacer sans modifier vos layouts. Universal Components sont fournies avec un thème Auth0 par défaut. Vous pouvez fournir votre propre thème pour qu’il corresponde à votre image de marque.

Fonctionnement de la personnalisation du thème

Universal Components pour Android utilise un thème Jetpack Compose qui reprend le modèle MaterialTheme de Material 3. Vous pouvez envelopper le contenu du SDK dans Auth0Theme { ... } afin de fournir des jetons, ou transmettre directement themeConfiguration à AuthenticatorSettingsComponent. Vous pouvez accéder aux jetons depuis n’importe quel composable à l’aide de Auth0Theme.colors, Auth0Theme.typography, Auth0Theme.shapes, Auth0Theme.dimensions et Auth0Theme.sizes.

Sans configuration

Si vous ne configurez aucun thème, Universal Components pour Android affiche le thème par défaut d’Auth0. L’exemple suivant affiche AuthenticatorSettingsComponent sans personnalisation :

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}

Aucune configuration supplémentaire n’est requise 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 Android affiche tous les autres à l’aide du thème Auth0 par défaut. L’exemple suivant remplace les jetons Auth0Color.light().copy(...), Auth0Color.dark() ou Auth0Typography.default().copy(...) :

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFFFF6B00),
                textOnPrimary = Color.White
            )
        )
    )
}

Forcer le mode sombre

Pour forcer le mode sombre, vous pouvez envelopper le composant dans Auth0Theme(darkTheme = true) ou spécifier explicitement le jeu de couleurs sombre :

// Option 1 : forcer le mode sombre avec Auth0Theme
@Composable
fun MFASettingsScreen() {
    Auth0Theme(darkTheme = true) {
        AuthenticatorSettingsComponent()
    }
}

// Option 2 : palette de couleurs sombres explicite
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.dark()
        )
    )
}

Configurer un thème complet d’image de marque

Créez votre propre thème d’image de marque combinant couleurs, typographie et formes dans une seule configuration Auth0ThemeConfiguration :

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFF0066CC),
                textOnPrimary = Color.White,
                backgroundLayerBase = Color(0xFFF5F5F5),
                backgroundLayerMedium = Color.White,
                textBold = Color(0xFF1F1F1F),
                textDefault = Color(0xFF636363),
                backgroundError = Color(0xFFFF4444),
                backgroundSuccess = Color(0xFF00CC66),
                borderDefault = Color(0xFFE0E0E0)
            ),
            typography = Auth0Typography.default().copy(
                displayMedium = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold),
                body = TextStyle(fontSize = 18.sp)
            ),
            shapes = Auth0Shapes(
                none = RoundedCornerShape(0.dp),
                extraSmall = RoundedCornerShape(4.dp),
                small = RoundedCornerShape(8.dp),
                medium = RoundedCornerShape(12.dp),
                large = RoundedCornerShape(16.dp),
                extraLarge = RoundedCornerShape(24.dp),
                full = RoundedCornerShape(100.dp)
            )
        )
    )
}

Lire les jetons du thème dans vos propres composables

Accédez aux jetons du thème dans un composable Auth0Theme { ... } à l’aide de l’objet accessor :

@Composable
fun CustomAuthCard() {
    Card(
        shape = Auth0Theme.shapes.medium,
        colors = CardDefaults.cardColors(
            containerColor = Auth0Theme.colors.backgroundLayerMedium
        )
    ) {
        Column(modifier = Modifier.padding(Auth0Theme.dimensions.spacingMd)) {
            Text(
                text = "Authenticator",
                style = Auth0Theme.typography.title,
                color = Auth0Theme.colors.textBold
            )
            Text(
                text = "Enabled",
                style = Auth0Theme.typography.bodySmall,
                color = Auth0Theme.colors.textDefault
            )
        }
    }
}

Changer de thème à l’exécution

Vous pouvez conserver la configuration du thème dans l’état afin de passer du thème clair au thème sombre (ou d’une variante de l’image de marque à une autre) sans recréer l’écran :

@Composable
fun MFASettingsScreen() {
    var isDarkMode by remember { mutableStateOf(false) }

    val themeConfig = Auth0ThemeConfiguration(
        color = if (isDarkMode) Auth0Color.dark() else Auth0Color.light()
    )

    Column {
        Switch(checked = isDarkMode, onCheckedChange = { isDarkMode = it })
        AuthenticatorSettingsComponent(themeConfiguration = themeConfig)
    }
}

Référence des jetons

Couleurs — Auth0Color

Pour personnaliser les couleurs, utilisez les fabriques Auth0Color.light() et Auth0Color.dark() comme points de départ, puis .copy(...) pour remplacer des jetons précis.

Jeton	Utilisation
`backgroundPrimary`, `backgroundPrimarySubtle`, `backgroundInverse`, `backgroundAccent`	Surfaces d’appel à l’action et d’accentuation
`backgroundLayerTop`, `backgroundLayerMedium`, `backgroundLayerBase`	Couches de superposition, de cartes et d’arrière-plan de l’application
`backgroundError`, `backgroundErrorSubtle`, `backgroundSuccess`, `backgroundSuccessSubtle`	Surfaces de rétroaction
`borderBold`, `borderDefault`, `borderSubtle`, `borderShadow`	Bordures d’accentuation et d’élévation
`textBold`, `textDefault`, `textDisabled`	Texte des titres, du corps et désactivé
`textOnPrimary`, `textOnSuccess`, `textOnError`	Texte sur des surfaces colorées

Typographie — Auth0Typography

Pour personnaliser la typographie, utilisez le jeton Compose TextStyle. Vous pouvez le remplacer avec Auth0Typography.default().copy(...).

Jeton	Utilisation
`displayMedium`, `display`	Titres de héros et d’écrans principaux
`titleLarge`, `title`	Titres d’écran et titres dans le contenu
`body`, `bodySmall`	Descriptions, texte du corps et notes de bas de page
`label`	Étiquettes de boutons et de champs de formulaire
`helper`, `overline`	Légendes, texte d’aide et étiquettes de catégorie

Formes — Auth0Shapes

Jeton	Utilisation
`none`	Aucun arrondi
`extraSmall`, `small`, `medium`, `large`, `extraLarge`	Échelle d’arrondi standard
`full`	Entièrement arrondi (pastille)

Dimensions — Auth0Dimensions

L’espacement utilise par défaut une grille de 4 dp. Accédez aux jetons d’espacement avec Auth0Theme.dimensions.*.

Jeton	Par défaut	Description
`spacingXxs`	4 dp	Espacement minimal entre des éléments étroitement liés
`spacingXs`	8 dp	Petit espacement entre des éléments groupés
`spacingSm`	12 dp	Marge intérieure moyenne
`spacingMd`	16 dp	Marge intérieure standard des composants et conteneurs
`spacingLg`	24 dp	Marge intérieure plus grande pour les sections principales
`spacingXl`	32 dp	Marge intérieure très grande
`spacingXxl`	48 dp	Marge intérieure deux fois plus grande

Tailles — Auth0Sizes

Accédez aux dimensions des composants avec Auth0Theme.sizes.*.

Jeton	Par défaut	Utilisation
`buttonHeight`	56 dp	Tous les boutons d’action principaux et secondaires
`inputHeight`	68 dp	Champs de saisie de texte et de numéros de téléphone
`otpFieldWidth`	52 dp	Largeur d’un champ de saisie pour un chiffre OTP
`otpFieldHeight`	60 dp	Hauteur d’un champ de saisie pour un chiffre OTP
`codeContainerHeight`	56 dp	Conteneurs d’affichage des codes de récupération
`iconSmall`	16 dp	Petites icônes — chevrons, indicateurs d’information, coches
`iconMedium`	24 dp	Icônes standard — images de méthodes d’authentification
`iconLarge`	32 dp	Grandes icônes — menu à trois points
`padding`	16 dp	Marge intérieure par défaut des composants
`paddingLarge`	24 dp	Marge intérieure plus grande des composants

Web Components

iOS Components

Android Components

Personnaliser le style et les thèmes d’Universal Components pour Android

Fonctionnement de la personnalisation du thème

Sans configuration

Remplacer un sous-ensemble de jetons

Forcer le mode sombre

Configurer un thème complet d’image de marque

Lire les jetons du thème dans vos propres composables

Changer de thème à l’exécution

Référence des jetons

En savoir plus

Installer le SDK Android

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

​Fonctionnement de la personnalisation du thème

​Sans configuration

​Remplacer un sous-ensemble de jetons

​Forcer le mode sombre

​Configurer un thème complet d’image de marque

​Lire les jetons du thème dans vos propres composables

​Changer de thème à l’exécution

​Référence des jetons

​En savoir plus

Installer le SDK Android

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

Fonctionnement de la personnalisation du thème

Sans configuration

Remplacer un sous-ensemble de jetons

Forcer le mode sombre

Configurer un thème complet d’image de marque

Lire les jetons du thème dans vos propres composables

Changer de thème à l’exécution

Référence des jetons

En savoir plus