Créer des palettes personnalisées

Les palettes personnalisées (ou thèmes) sont prises en charge à partir de GLPI 11.0. Ce sont des fichiers SCSS qui contiennent des règles CSS et ils peuvent être utilisés de la même manière que les palettes intégrées.

Les palettes personnalisées doivent être placées dans le dossier files/_themes à l'intérieur de votre installation GLPI ou à l'emplacement déterminé par les options de configuration GLPI_VAR_DIR ou GLPI_THEMES_DIR si vous les avez remplacées.

Tous les fichiers de palette sont chargés en permanence. Cela permet un aperçu instantané lors du changement de sélection de palette dans les préférences utilisateur et facilite également le débogage. Pour cette raison, les règles CSS à l'intérieur des palettes doivent être restreintes en utilisant le sélecteur :root[data-glpi-theme='mycustompalette'] (où mycustompalette est le nom du fichier et donc de la palette).

Les palettes personnalisées doivent également tenter de se limiter à modifier uniquement les variables CSS qui sont préfixées par --tblr ou --glpi. Cela permet de maintenir la cohérence du style de GLPI. Cependant, vous êtes libre d'apporter des ajustements précis en modifiant également les propriétés CSS sur des éléments spécifiques.

Les palettes personnalisées peuvent définir un aperçu "échantillon" qui sont généralement quatre couleurs représentant la palette et s'affichant dans la liste déroulante à côté du nom de la palette. Ceci peut être réalisé de deux manières.

1. L'option recommandée est d'ajouter des variables CSS --glpi-palette-color-n à la racine du CSS de la palette pour les quatre couleurs. Ces variables doivent être définies statiquement sur des couleurs et ne peuvent pas être calculées ou basées sur d'autres propriétés CSS.

2. L'autre option est de créer une image "mycustompalette.png" dans un dossier "previews" à l'emplacement où vous avez placé votre CSS de palette personnalisé. Ces images d'aperçu doivent mesurer 60 par 20 pixels pour garantir qu'elles s'affichent correctement.

Exemple :

:root[data-glpi-theme="mycustompalette"] {
    --tblr-primary-rgb: 142, 197, 71;
    --tblr-secondary: #768363;
    --tblr-secondary-fg: #fcfcfc;
    --tblr-link-color-rgb: 69, 148, 54;
    --glpi-mainmenu-bg: #459436;
    --glpi-mainmenu-fg: #f4f6fa;
    --glpi-palette-color-1: #768363;
    --glpi-palette-color-2: #459436;
    --glpi-palette-color-3: #fcfcfc;
    --glpi-palette-color-4: #f4f6fa;
}

Toutes les palettes sont considérées comme une extension de la palette de base qui est Auror.

Si vous souhaitez que votre palette personnalisée soit considérée comme une palette sombre, vous devrez également inclure $is-dark: true; quelque part dans le fichier de palette. Contrairement aux règles CSS, cette variable SCSS n'a pas besoin d'être définie dans un sélecteur :root[data-glpi-theme] car GLPI vérifiera uniquement si elle existe quelque part dans le fichier lors du chargement et taguera la palette comme sombre si elle est trouvée. Lorsqu'une palette est considérée comme sombre, un attribut supplémentaire data-glpi-theme-dark sur l'élément HTML racine est défini sur '1'. Cela inclura automatiquement certaines règles CSS pour aider à rendre GLPI correct.

Exemple :

$is-dark: true;
:root[data-glpi-theme="mydarkpalette"] {
    --tblr-primary-rgb: 142, 197, 71;
    --tblr-secondary: #768363;
    --tblr-secondary-fg: #fcfcfc;
    --tblr-link-color-rgb: 69, 148, 54;
    --glpi-mainmenu-bg: #459436;
    --glpi-mainmenu-fg: #f4f6fa;
    --glpi-palette-color-1: #768363;
    --glpi-palette-color-2: #459436;
    --glpi-palette-color-3: #fcfcfc;
    --glpi-palette-color-4: #f4f6fa;
}