Couleurs et thèmes dans Kirigami

Faire que votre application suive le thème de couleurs de l'utilisateur.

Kirigami possède une palette de couleurs suivant les couleurs du système, pour mieux mieux s'intégrer à la plate-forme sur laquelle il fonctionne (c'est-à-dire Plasma Desktop, Plasma Mobile, GNOME, Android, etc.).

Tous les composants QML de Kirigami et tous les composants QML de Qt Quick Controls 2 suivent déjà cette palette par défaut. Ainsi, généralement, aucune couleur personnalisée ne sera nécessaire pour ces contrôles.

Les composants primaires tels que « Rectangle » devraient toujours être colorés avec la palette de couleurs fournie par Kirigami grâce à la propriété associée [ « Theme » ](docs:kirigami2 ; Kirigami::PlatformTheme).

Les couleurs codées en dur dans QML, telles que « #32b2fa » ou « red », doivent généralement être évitées. S'il est vraiment nécessaire d'avoir des éléments avec des couleurs personnalisées, il doit s'agir d'une zone dans laquelle ces couleurs sont utilisées (généralement dans la zone de contenu de l'application et jamais dans les éléments chromatiques tels que les barres d'outils ou les dialogues). Par exemple, il est impossible d'utiliser un premier-plan noir codé en dur « noir » sur un arrière-plan « Kirigami.Theme.backgroundColor ». Car, si la plate-forme utilise un thème de couleurs sombres, le résultat sera pauvre en contrastes entre le noir et le presque noir.

Thème

Pour plus d'informations sur la classe de thème de Kirigami, consultez la page de documentation sur l'API

« Kirigami.Theme » est une propriété attachée, elle est donc disponible pour être utilisée dans tout élément QML. Elle contient comme propriétés toutes les couleurs disponibles de la palette et quelle palette utiliser, comme la propriété « colorSet ».

Exemple :

import QtQuick 2.11
import org.kde.kirigami 2.9 as Kirigami

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Palette de couleurs

Selon l'emplacement d'un contrôle, celui-ci doit utiliser un jeu de couleurs différent : par exemple, (avec le thème de couleurs claires Breeze) dans les affichages d'éléments, l'arrière-plan normal est presque blanc, tandis que dans d'autres régions, comme les barres d'outils ou les boîtes de dialogue, la couleur d'arrière-plan normale est le gris.

Si vous définissez un jeu de couleurs pour un élément, tous ses éléments fils (de manière récursive) en hériteront automatiquement (à moins que la propriété « inherit » n'ait été explicitement définie à « False », ce qui devrait toujours être fait lorsque le développeur veut forcer un jeu de couleurs spécifique). Ainsi, il est donc facile de changer les couleurs de toute une hiérarchie d'éléments sans toucher aux éléments eux-mêmes.

« Kirigami.Theme » prend en charge 5 jeux de couleurs différents :

  • Vue : ensemble de couleurs défini pour les vues des éléments, généralement la plus claire de toutes (dans les thèmes de couleurs claires).
  • Fenêtre : Défaut Couleur définie pour les fenêtres et les zones « chrome ».
  • Bouton : palette de couleurs utilisée par les boutons
  • Sélection : jeu de couleurs utilisé par les zones sélectionnées
  • Infobulle : palette de couleurs utilisée par les infobulles
  • En addition : un ensemble de couleurs destinées à être complémentaires de la fenêtre : généralement, elles sont foncées même dans les thèmes clairs. Peut être utilisé pour « mettre en valeur » de petites zones de l'application.

Exemple :

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

// Les commentaires supposent que le système utilise le thème de couleurs « Breeze Light ».
...
Rectangle {
    // Une couleur grise sera utilisée, car la couleur par défaut est « Window ».
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // Le texte sera presque noir, tel que défini dans le jeu de couleurs de la fenêtre.
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Utiliser l'ensemble pour les ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // N'héritent pas du parent
        Kirigami.Theme.inherit: false

        // Ce sera une couleur presque blanche.
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Il s'agira également d'une couleur proche du blanc, car l'ensemble de couleurs est
            // hérité du parent et sera celui de l'affichage.
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // Le texte sera presque noir, tel que défini dans le jeu de couleurs pour
                // l'affichage.
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Utiliser l'ensemble complémentaire
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // N'héritent pas du parent
            Kirigami.Theme.inherit: false

            // Ce sera presque noir car dans le jeu complémentaire de couleurs, la couleur de fond
            // est sombre.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // Le texte sera presque blanc, tel que défini dans le jeu complémentaire de
                // couleurs.
                text: i18n("hello")
            }
        }
    }
}

Certains composants, comme les étiquettes, hériteront automatiquement par défaut du jeu de couleurs, tandis que d'autres composants ont un jeu fixe de couleurs, par exemple. Les boutons sont fixés sur le jeu de couleurs « Button ». Si l'on souhaite que le bouton hérite du jeu de couleurs de son parent, la propriété « inherit » doit être explicitement définie à « True » :

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

Controls.Button {
    Kirigami.Theme.inherit: true
    text: i18n("ok")
}

 ! Une capture d'écran d'une comparaison entre un bouton héritant et un autre n'héritant pas

Utilisation de couleurs personnalisées

Bien qu'il soit déconseillé d'utiliser des couleurs codées en dur, Kirigami offre un moyen plus facile pour la maintenance en attribuant une palette personnalisée codée en dur à un élément et à tous ses fils, ce qui permettra de définir de telles couleurs personnalisées à un seul et unique endroit :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

Rectangle {
    Kirigami.Theme.inherit: false
    // NOTE: regardless of the color set used, it is recommended to replace 
    // all available colors in Theme, to avoid badly contrasting colors
    Kirigami.Theme.colorSet: Kirigami.Theme.Window
    Kirigami.Theme.backgroundColor: "#b9d795"
    Kirigami.Theme.textColor: "#465c2b"
    Kirigami.Theme.highlightColor: "#89e51c"
    // Redefine all the others

    // This will be "#b9d795"
    color: Kirigami.Theme.backgroundColor

    Rectangle {
        // This will be "#465c2b"
        anchors.centerIn: parent
        height: parent.height / 2
        width: parent.width / 2
        color: Kirigami.Theme.textColor
    }
}

 ! Une capture d'écran montrant le code ci-dessus avec « qmlscene ». On peut voir deux rectangles avec deux couleurs différentes