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 Mobile, GNOME, Android, etc.).

Tots els components QML del Kirigami i tots els components QML de Qt Quick Controls 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 Kirigami.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 les àrees de 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. Això és un problema d'accessibilitat i s'hauria d'evitar.

Tema

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

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    height: 300
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Rectangle {
            anchors.centerIn: parent
            implicitHeight: 100
            implicitWidth: 200
            color: Kirigami.Theme.highlightColor
        }
    }
}

La Galeria del Kirigami proporciona un exemple de codi que mostra tots els colors disponibles per al Kirigami a través del Kirigami.Theme. Això inclou tots els seus estats: si feu clic fora de la finestra, els colors canviaran al seu estat inactiu, i si canvieu el sistema a un tema fosc, les variants fosques dels colors es mostraran en temps real.

Conjunt de colors

Depenent d'on s'ubiqui un control, haureu d'utilitzar un conjunt de colors diferent: per exemple, quan el tema de color Brisa clara es fa servir a les Views, 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 fills l'heretaran de manera recursiva 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 diferents de colors:

• 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 per a les finestres i les àrees «cromades» (aquest és també el conjunt de colors predeterminat)
• 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ó

Aquest és un exemple que mostra com s'hereten els conjunts de colors i es poden utilitzar per a distingir components diferents. S'ha afegit una vora gran als colors de contrast.

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

// The comments assume the system uses the Breeze color theme

Kirigami.ApplicationWindow {
    height: 500
    width: 800

    Rectangle {
        anchors.fill: parent
        border.width: 5

        // A gray color will be used, as the default color set is Window
        color: Kirigami.Theme.backgroundColor

        Controls.Label {
            // The text will be near-black, as defined in the Window color set for light themes
            text: "Rectangle that uses default background color\nfrom the Window color set"
            padding: 100
        }
        Rectangle {
            anchors.bottom: parent.bottom
            border.width: 5
            width: parent.width
            height: Math.round(parent.height / 2)

            // Use the color set used for Views
            Kirigami.Theme.colorSet: Kirigami.Theme.View
            // Do not inherit from the parent
            Kirigami.Theme.inherit: false
            // This will be a near-white color in light themes
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                text: "Rectangle that does not inherit the default background color\nand uses the Theme.View color set"
                padding: 50

            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                border.width: 5
                width: Math.round(parent.width / 2)
                height: Math.round(parent.height / 2)

                // This will be a near-white color too, as the color set
                // is inherited from the parent and will be View
                color: Kirigami.Theme.backgroundColor

                Controls.Label {
                    // The text will be near-black, as defined in the View color set for light themes
                    text: "Rectangle that inherits the Theme.View color set"
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                border.width: 5
                width: Math.round(parent.width / 2)
                height: Math.round(parent.height / 2)

                // Use the Complementary set
                Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
                // Do not inherit from the parent
                Kirigami.Theme.inherit: false
                // This will be near-black as the background color
                // of the Complementary color set is dark in light themes
                color: Kirigami.Theme.backgroundColor

                Controls.Label {
                    // The text will be near-white, as defined in the Complementary color set for light themes
                    text: "Rectangle that does not inherit the Theme.View\nand uses Theme.Complementary instead"
                    anchors.centerIn: parent
                }
            }
        }
    }
}

Utilitzar 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 fills, el qual permetrà definir aquests colors personalitzats en un lloc i només en un:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Custom colors"
    height: 300
    width: 300

    Rectangle {
        anchors.fill: parent
        Kirigami.Theme.inherit: false
        // NOTA: Independentment del conjunt de colors utilitzat, es recomana substituir tots els
        // colors disponibles al tema, per a evitar un contrast dolent dels colors

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Redefiniu tots els altres colors que vulguis

        // Aquest serà «#b9d795»
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            // Aquest serà «#465c2b»
            anchors.centerIn: parent
            height: Math.round(parent.height / 2)
            width: Math.round(parent.width / 2)
            color: Kirigami.Theme.textColor
        }
    }
}