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

Découvrez comment 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

​

En savoir plus

Installer le SDK Android

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

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

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