Colors i temes creats amb el Kirigami

El Kirigami té una paleta de colors que segueix els colors del sistema, per a integrar-se millor amb la plataforma en la qual s’executa (és a dir, Escriptori Plasma, Plasma mòbil, GNOME, Android, etc.)

Tots els components QML de Kirigami i tots els components QML de Qt Quick Controls 2 ja seguiran de manera predeterminada aquesta paleta, de manera que normalment no es necessitaran colors personalitzats per a cap d’aquests controls.

Els components primitius com Rectangle sempre s’han d’acolorir amb la paleta de colors proporcionada pel Kirigami a través de la propietat adjunta Theme

En general, s’han d’evitar els colors codificats en el QML, com #32b2fa o red. Si realment és necessari tenir elements amb colors personalitzats, haurà de ser una àrea on només s’utilitzin colors personalitzats (generalment a l’àrea de contingut de l’aplicació, i mai en el cromat com les barres d’eines o els diàlegs), per exemple, un primer pla black codificat no es pot utilitzar sobre un fons Kirigami.Theme.backgroundColor, perquè si la plataforma empra un esquema de color fosc, el resultat tindrà un contrast pobre del negre sobre gairebé negre.

Tema

Per a obtenir més informació sobre la classe Kirigami Theme, vegeu la documentació de l’API

Kirigami.Theme és una propietat adjunta, per tant, està disponible per a utilitzar-la en qualsevol element QML. Conté com propietats tots els colors disponibles a la paleta i quina paleta emprar, així com la propietat colorSet.

Exemple:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Conjunt de colors

Depenent d’on s’ubiqui un control, haureu d’utilitzar un conjunt de colors diferent: per exemple, (amb el tema de color Brisa clara) en les vistes d’elements, el fons normal és gairebé blanc, mentre que en altres regions, com les barres d’eines o diàlegs, el color de fons normal és gris.

Si establiu un conjunt de colors per a un element, tots els seus elements fill (de manera recursiva) l’heretaran automàticament (llevat que la propietat inherit s’hagi establert explícitament a false, el qual sempre s’ha de fer quan el desenvolupador vol forçar un conjunt de colors específic), de manera que és fàcil canviar els colors de tots una jerarquia d’elements sense tocar cap dels elements en si.

Kirigami.Theme admet 5 conjunts de colors diferents:

• View: conjunt de colors per a les vistes d’elements, generalment el més clar de tots (en els temes de colors clars)
• Window: conjunt de colors predeterminats per a les finestres i les àrees «cromades»
• Button: conjunt de colors utilitzat pels botons
• Selection: conjunt de colors utilitzat per les àrees seleccionades
• Tooltip: conjunt de colors utilitzat per als consells d’eina
• Complementary: conjunt de colors destinat a ser complementari a Window: generalment és fosc fins i tot en els temes clars. Pot emprar-se per a «emfatitzar» en les àrees petites de l’aplicació

Exemple:

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

// Els comentaris assumeixen que el sistema utilitza el tema de color Brisa clara
...
Rectangle {
    // S'utilitzarà un color gris, ja que el conjunt de colors predeterminat és Window
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // El text serà gairebé negre, com es defineix en el conjunt de colors Window
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Usar el conjunt per a ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // No heretar del pare
        Kirigami.Theme.inherit: false

        // Aquest serà un color gairebé blanc
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Aquest també serà un color gairebé blanc, ja que el colorSet s'hereta del pare i serà
            // View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // El text serà gairebé negre, com es defineix en el conjunt de colors View
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Usar el conjunt complementari
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // No heretar del pare
            Kirigami.Theme.inherit: false

            // Serà gairebé negre, ja que en el conjunt de colors Complementary el color de fons és
            // fosc.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // El text serà gairebé blanc, com es defineix en el conjunt de colors Complementary
                text: i18n("hello")
            }
        }
    }
}

Alguns components, com les Labels, de manera predeterminada heretaran automàticament el conjunt de colors, alguns altres components tenen un conjunt de colors fix, per exemple, els botons es fixen al conjunt de colors Button. Si es desitja que el botó hereti el conjunt de colors pare, la propietat inherit s’haurà d’establir explícitament a 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")
}

Usar colors personalitzats

Tot i que es desaconsella utilitzar colors codificats, el Kirigami ofereix una forma més fàcil de mantenir per a assignar una paleta codificada personalitzada a un element i a tots els seus elements fills, el qual permetrà definir aquests colors personalitzats en un lloc i només en un:

 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
    }
}