> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

Les [Universal Components pour iOS](https://github.com/auth0/ui-components-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.

<div id="how-theming-works">
  ## Fonctionnement de la personnalisation visuelle
</div>

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é.

<div id="zero-configuration">
  ### Aucune configuration
</div>

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 :

```swift wrap lines theme={null}
import SwiftUI
import Auth0UniversalComponents

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  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.
</Callout>

<div id="override-a-subset-of-tokens">
  ### Remplacer un sous-ensemble de jetons
</div>

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 :

```swift wrap lines theme={null}
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 :

```swift wrap lines theme={null}
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)
)
```

<div id="configure-a-full-brand-theme">
  ### Configurer un thème d’image de marque complet
</div>

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` :

```swift wrap lines theme={null}
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()))
```

<div id="read-the-theme-in-your-own-views">
  ### Utiliser le thème dans vos propres vues
</div>

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

```swift wrap lines theme={null}
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)
    }
}
```

<div id="token-reference">
  ### Référence des jetons
</div>

<Accordion title="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            |
</Accordion>

<Accordion title="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             |

  <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
    Si la police `Inter` n’est pas incluse dans l’application hôte, SwiftUI utilise automatiquement la police `SF Pro`.
  </Callout>
</Accordion>

<Accordion title="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                    |
</Accordion>

<Accordion title="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                              |
</Accordion>

<Accordion title="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                         |
</Accordion>

<div id="learn-more">
  ## En savoir plus
</div>

<CardGroup cols={2}>
  <Card title="Installer le SDK iOS" icon="download" href="/docs/fr-ca/get-started/universal-components/ios/ios-overview">
    Prérequis de la plateforme et installation d’iOS.
  </Card>

  <Card title="Créer une interface libre-service de sécurité des comptes" icon="key" href="/docs/fr-ca/get-started/universal-components/ios/components/my-account-overview">
    Initialisez le SDK et reliez le fournisseur de jetons à votre tenant Auth0.
  </Card>
</CardGroup>