Colori e temi in Kirigami

Kirigami ha una tavolozza di colori che segue i colori del sistema per integrarsi meglio con la piattaforma su cui è in esecuzione (ad esempio Plasma Desktop, Plasma Mobile, GNOME, Android, ecc.).

Tutti i componenti QML di Kirigami e i controlli QtQuick dovrebbero già seguire questa tavolozza per impostazione predefinita, quindi di solito non dovrebbe essere necessaria alcuna colorazione personalizzata per questi controlli.

I componenti primitivi come Rectangle dovrebbero sempre essere colorati con la tavolozza dei colori fornita da Kirigami tramite la proprietà allegata Kirigami.Theme.

I colori codificati in QML, come #32b2fa o red, dovrebbero solitamente essere evitati; se è davvero necessario avere elementi con colori personalizzati, dovrebbe essere un'area in cui vengono utilizzati solo colori personalizzati (di solito nell'area dei contenuti dell'applicazione e mai nelle aree cromate come barre degli strumenti o finestre di dialogo). Ad esempio, un primo piano nero codificato non può essere utilizzato su uno sfondo [Kirigami.Theme. backgroundColor](https://api.kde.org/qml-org-kde-kirigami-platform-theme.html# backgroundColor-attached-prop), perché se la piattaforma utilizza uno schema di colori scuri il risultato avrà uno scarso contrasto con il nero su quasi nero. Questo è un problema di accessibilità e dovrebbe essere evitato.

Tema

Kirigami.Theme è una proprietà collegata e pertanto è disponibile per l'uso per qualsiasi elemento QML. Le sue proprietà includono tutti i colori disponibili nella tavolozza e quale tavolozza utilizzare, come la proprietà 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
        }
    }
}

Galleria Kirigami fornisce un esempio di codice che mostra tutti i colori disponibili per Kirigami attraverso Kirigami.Theme. Ciò include tutti i loro stati: se fai clic all'esterno della finestra, i colori passano allo stato inattivo e se passi il sistema a un tema scuro, le varianti scure dei colori dovrebbero apparire in tempo reale.

Insieme di colori

A seconda di dove si trova un controllo, dovrebbe utilizzare un set di colori diverso: ad esempio, quando viene utilizzata la combinazione di colori Breeze Light in Visualizzazioni, lo sfondo normale è quasi bianco, mentre in altre regioni, come barre degli strumenti o finestre di dialogo, il colore di sfondo normale è grigio.

Se definisci un set di colori per un elemento, tutti i suoi elementi secondari lo erediteranno automaticamente in modo ricorsivo (a meno che la proprietà inherit non sia stata esplicitamente impostata su "false", cosa che dovrebbe sempre essere fatta quando lo sviluppatore vuole forzare un set di colori specifico), quindi è facile cambiare i colori per un'intera gerarchia di elementi senza toccare uno qualsiasi degli elementi stessi.

Kirigami.Theme supporta 5 diversi set di colori:

• Vista: l'insieme dei colori per le viste degli elementi, di solito il più chiaro di tutti (nei temi di colori chiari)
• Finestra: set di colori per finestre e aree cromate (questo è anche il set di colori predefinito)
• Pulsante: l'insieme dei colori usato dai pulsanti
• Selezione: l'insieme dei colori usato per le aree selezionate
• Suggerimento: l'insieme dei colori usato dai suggerimenti
• Complementare: set di colori pensato per essere complementare a Window: solitamente scuro anche nei temi chiari. Può essere utilizzato per enfatizzare piccole aree dell'applicazione

Ecco un esempio che mostra come i set di colori vengono ereditati e come possono essere utilizzati per distinguere diversi componenti. È stato aggiunto un ampio bordo per contrastare i colori.

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

Uso di colori personalizzati

Sebbene sia sconsigliato utilizzare colori codificati, Kirigami offre un modo più gestibile per assegnare una tavolozza codificata personalizzata a un oggetto e a tutti i suoi figli, che consente di definire tali colori personalizzati in un posto e in uno solo:

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: indipendentemente dal set di colori utilizzato, si consiglia di sostituire tutti i
        // colori disponibili nel Tema, per evitare colori troppo contrastanti

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Ridefinisci tutti gli altri colori che desideri

        // Questo sarà "#b9d795"
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            // Questo sarà "#465c2b"
            anchors.centerIn: parent
            height: Math.round(parent.height / 2)
            width: Math.round(parent.width / 2)
            color: Kirigami.Theme.textColor
        }
    }
}