Pour modifier les couleurs et les polices de l'interface Web de MyQ, vous devez fournir un fichier de thème dans le fichier config.ini.

Enregistrez le fichier du thème dans C:\ProgramData\MyQ\Themes\webUI\ (chemin par défaut), et définissez le nom du fichier à la valeur themeFile dans l'option config.ini fichier.

Par exemple, si le nom du fichier du thème est customTheme.cssle config.ini devrait ressembler à ceci :

[General]
themeFile=customTheme.css
CODE

Un seul thème peut être défini à la fois et il est utilisé pour tous les utilisateurs et administrateurs. Si aucun fichier de thème n'est fourni, MyQ utilise le thème par défaut intégré.

Propriétés du fichier de thème

Les fichiers de thème sont créés en remplaçant les valeurs des variables dans un fichier CSS. Les variables suivent la syntaxe standard des propriétés personnalisées CSS et reçoivent des valeurs CSS standard. Les variables doivent se trouver dans le champ :racine portée. Les variables non spécifiées dans le fichier du thème, gardent la valeur du thème par défaut.

Exemple :

:root {
    --primary: MediumOrchid;
    --primary-light: thistle;
    --secondary: peachpuff;
    --secondary-light: #fee3ca;
    --secondary-dark: orange;
    --list-item-highlight: plum;
}
CODE

Variables

  • Il est possible d'utiliser une variable existante en utilisant la notation --variableB : var(-variableA) ;.

  • Il est recommandé de conserver les valeurs exprimées en rem unités

Nom de la variable

Valeur par défaut

font-family-base

"Segoe UI",Tahoma,Helvetica,sans-serif

font-size-base

1,2rem

primaire

#abc7ec

lumière primaire

#deecfd

primaire-foncé

#255ca5

secondaire

#eee

lumière secondaire

#f5f5f5

secondaire-foncé

#b8b8b8

accent

#ffd278

btn-hover-color

var(--primaire)

btn-highlight-color

var(--accent)

btn-highlight-hover-color

#ffe3ab

couleur de l'en-tête

var(--primaire)

header-text-color

#2e2e2e

app-tab-color

var(--secondary-light)

app-tab-text-color

#2e2e2e

app-tab-active-color

var(--primaire)

app-tab-active-text-color

#2e2e2e

sidebar-color

var(--primaire-lumière)

couleur de la barre d'outils

var(--primaire-lumière)

sidebar-item-height

2.6rem

toolbar-default-height

2.7rem

hauteur de l'arbre

1,6rem