Couleurs et mode sombre

La couleur de marque

La couleur de marque peint les boutons, l'élément actif de la barre latérale, les points forts des graphiques et les cartes de paiement. Quatre thèmes sont fournis :

Le thème utilisé est DEFAULT_THEME_COLOR dans src/Demo/ThemeColorSwitcher/themes.ts. Donnez-lui l'id d'un autre thème :

export const DEFAULT_THEME_COLOR = "blue";

Pour utiliser votre propre couleur, modifiez un thème dans le même fichier, par exemple brandPrimary pour la couleur principale et brandPrimaryLight pour sa nuance plus claire, et gardez son id dans DEFAULT_THEME_COLOR.

Avec le mode démo activé, un sélecteur flottant permet d'essayer les thèmes, et le navigateur retient votre choix. Ce choix l'emporte sur DEFAULT_THEME_COLOR jusqu'à ce que vous effaciez les données du site. Avec le mode démo désactivé, le sélecteur est masqué et l'application utilise toujours DEFAULT_THEME_COLOR.

• Une nouvelle couleur ne s'affiche pas

Mode clair et mode sombre

Le bouton soleil et lune de l'en-tête, et Dark Mode dans Settings, Preferences, basculent entre sombre et clair. Le tableau de bord démarre en mode sombre, et le navigateur retient le mode choisi par chaque utilisateur.

Les arrière-plans, bordures et couleurs de texte des deux modes sont des variables dans src/styles/theme.css : les claires dans :root, les sombres dans .dark. Par exemple l'arrière-plan de la page :

:root {
    --color-bg-primary: #f8fafc;
}

.dark {
    --color-bg-primary: #030303;
}

Elles restent identiques dans chaque thème de marque ; seules les couleurs de marque changent avec le thème.

Comment les couleurs sont appliquées

Ajouter un thème ou retirer le sélecteur