# Changer dynamiquement la couleur de fond

> Découvrez comment créer des effets visuels dynamiques en changeant la couleur de fond de votre application, idéal pour l'accessibilité. Apprenez les méthodes utilisant les arrière-plans et le data binding dans PandaSuite.

https://docs.pandasuite.com/fr/tutorials/how-to/dynamic-background-color/

**Vous pouvez facilement créer des effets visuels dynamiques en changeant la couleur de fond de votre application.**

Par exemple, pour des raisons d'accessibilité, vous pouvez ajouter un bouton qui change l'arrière-plan et la couleur de votre police en un mode à contraste élevé pour les utilisateurs malvoyants.

Il existe deux méthodes principales pour y parvenir : en utilisant les arrière-plans ou le **data binding**.

**Quelle méthode choisir ?**

- Utiliser les [arrière-plans](https://docs.pandasuite.com/fr/essentials/project-properties/foreground-and-background/) est idéal pour des scénarios simples avec un nombre limité d'options de couleur prédéfinies.
- Le [data binding](https://docs.pandasuite.com/fr/essentials/data/data-binding/) offre plus de flexibilité, notamment lorsque les couleurs sont déterminées par les entrées des utilisateurs, des données externes ou des conditions complexes.

Voici comment appliquer ces deux techniques :

## Méthode 1 : avec les arrière-plans

Grâce à l'[arrière-plan](https://docs.pandasuite.com/fr/essentials/project-properties/foreground-and-background/), vous pouvez définir différents états visuels et basculer entre eux en fonction des interactions ou des déclencheurs.

1. Sélectionnez le **Projet** et rendez-vous dans les arrière-plans
2. Changez la couleur de fond
3. Créez un nouvel arrière-plan et choisissez une autre couleur
4. Choisissez un élément déclencheur (par exemple un bouton) et l'action **Changer d'arrière-plan**

## Méthode 2 : avec le data binding

Le [data binding](https://docs.pandasuite.com/fr/essentials/data/data-binding/) vous permet de lier les propriétés d'un écran (comme la couleur de fond) à une variable, ce qui permet des mises à jour dynamiques en fonction des changements de données.

1. **Créer une variable**

   - Rendez-vous dans le **[Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/)**
   - Cliquez sur **+ Ajouter une propriété** et nommez-la (par exemple, `bgColor`).
   - Définissez son type sur **Couleur**.

2. **Lier la couleur de fond**

   - Sélectionnez votre écran
   - Dans le panneau **Propriétés**, trouvez la propriété **Couleur de fond**.
   - Cliquez sur l'icône de liaison de données et associez-la à votre variable `bgColor`.

3. **Modifier la variable dynamiquement**

   - Utilisez des interactions pour modifier la variable `bgColor`.
   - Par exemple, créez un bouton avec une interaction : **Définir une variable** -> `bgColor` -> choisissez une nouvelle couleur.