Personnaliser le thème

Le thème donne à Portail ZAPP ses couleurs, ses formes (arrondis, ombres) et ses polices, en mode clair et en mode sombre. Deux écrans, réservés aux Administrateurs, le modifient sans redéploiement :

Design (menu Administration › Apparence et langues › Design) : réglage guidé, valeur par valeur, avec un aperçu ;
Fichiers de thème (menu Administration › Apparence et langues › Fichiers de thème) : remplacement des fichiers de style du thème, pour aller au-delà de l'écran Design.

La structure des pages (barre de navigation, menu) ne se modifie pas.

Écran Design

Aucun thème actif

Si aucun thème n'est actif, l'écran demande d'abord un nom de thème : lettres minuscules, chiffres et tirets (par exemple mon-theme), puis Créer. Le message Thème créé. Ajustez les valeurs puis enregistrez. confirme la création.

Régler les valeurs

Choisissez Clair ou Sombre, puis ajustez les valeurs, regroupées par famille : Marque, Surfaces, Bordure, Textes, Formes et Polices. Une couleur se choisit avec le sélecteur ou se saisit (par exemple #2563EB) ; les autres valeurs se saisissent (taille d'arrondi, ombre, liste de polices).

L'Aperçu, à droite, montre l'effet en direct (boutons, carte, formulaire, tableau) avant tout enregistrement.

Enregistrer applique le thème à tous aussitôt : Thème enregistré, appliqué immédiatement. Une valeur refusée affiche Une des valeurs saisies n'est pas acceptée et rien n'est enregistré.
Revenir au thème livré, proposé une fois le thème personnalisé, supprime la personnalisation : Personnalisation supprimée, le thème livré est de nouveau utilisé.

Écran Fichiers de thème

L'écran indique le Thème actif et liste ses fichiers de style, avec leur État :

Fichier livré : le fichier d'origine est utilisé ;
Surchargé : votre version remplace le fichier d'origine ;
Absent : le thème n'a pas ce fichier.

Pour modifier un fichier : Télécharger, modifiez-le, choisissez-le puis Téléverser (Fichier de thème mis à jour). Le changement s'applique immédiatement. Revenir au fichier livré supprime votre version.

Un fichier est refusé s'il est vide, s'il dépasse 256 Kio, s'il ne ressemble pas à du CSS ou si ses accolades ne sont pas équilibrées. Sans thème actif, rien ne peut être remplacé.

Ce qu'il faut savoir

L'écran Design et le fichier …-tokens.css de l'écran Fichiers de thème portent les mêmes valeurs. Enregistrer dans Design réécrit ce fichier : une valeur ajoutée à la main dans ce fichier, en dehors de celles de l'écran Design, est perdue (les imports et déclarations de polices placés en tête du fichier sont conservés). Faites vos modifications avancées dans l'autre fichier du thème (…-compat.css).
Revenir au thème livré et Revenir au fichier livré sur ce même fichier ont le même effet.

Voir aussi

« Personnaliser le nom et le logo » : nom de l'application, logo et icônes.