Kleuren en thema's in Kirigami

Kirigami heeft een kleurenpalet dat de systeemkleuren volgt, om beter te integreren op het platform waarop het actief is (d.w.z. Plasma bureaublad, Plasma mobiel, GNOME, Android, etc.).

Alle QML componenten van Kirigami en alle Qt Quick Controls zouden het pallet al standaard moeten volgen, dus zal gewoonlijk helemaal geen aangepaste kleuring nodig zijn voor deze besturingen.

Primitieve componenten zoals Rectangle zouden altijd gekleurd moeten zijn met het kleurpalet geleverd door Kirigami via de aangehangen eigenschap Kirigami.Thema.

Hard gecodeerde kleuren in QML, zoals #32b2fa of red zouden gewoonlijk vermeden moeten worden; als het echt noodzakelijk is om elementen met aangepaste kleuren te hebben, zou het in een gebied moeten zijn waar alleen aangepaste kleuren zijn gebruikt (gewoonlijk in het inhoudsgebied van de toepassing en nooit in het chroomgebieden zoals werkbalken of dialogen). Bijvoorbeeld, een hard gecodeerd black als voorgrond kan niet gebruikt worden over een Kirigami.Theme.backgroundColor achtergrond, omdat als het platform een donker kleurenschema gebruikt het resultaat er slecht uitziet met contrast tussen zwart en bijna zwart.

Thema

Kirigami.Theme is een aangehangen eigenschap en is daarom beschikbaar voor gebruik in elk QML item. Het bevat als eigenschap alle kleuren beschikbaar in het palet, zoals eigenschap 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
        }
    }
}

Kirigami Gallery levert een codevoorbeeld die alle beschikbare kleuren voor Kirigami presenteert via Kirigami.Theme. Dit omvat alle hun statussen: als u buiten het venster klikt, wijzigen de kleuren naar hun inactieve status en als u uw systeem omschakelt naar een donker thema, zouden de donkere varianten van de kleuren direct moeten verschijnen.

Kleurenset

Afhankelijk van waar een besturing is gelokaliseerd, zou het een andere kleurset moeten gebruiken: bijvoorbeeld, (met het kleurenthema Breeze light) in Views, is de normale achtergrond bijna wit, terwijl in andere gebieden, zoals werkbalken of dialogen, de normale achtergrondkleur grijs is.

Als u een kleurenset voor een item definieert, zullen alle kind-items recursief het automatisch erven (tenzij de eigenschap inherit expliciet is ingesteld op false, wat altijd gedaan zou moeten worden wanneer de ontwikkelaars een specifieke kleurenset wil afdwingen) het is dus gemakkelijk kleuren te wijzigen voor een gehele hiërarchie van items zonder de items zelf aan te raken.

Kirigami.Theme ondersteunt 5 verschillende kleurensets:

• Beeld: kleurenset voor item weergaven, gewoonlijk de lichtste van allen (in lichte kleurenthema's)
• Venster: kleurenset voor vensters en chroom-gebieden (dit is ook de standaard kleurenset)
• Knop: kleurenset gebruikt door knoppen
• Selectie: kleurenset gebruikt door geselecteerde gebieden
• Tekstballon: kleurenset gebruikt door tekstballonnen
• Complementair: kleurenset bedoeld om complementair te zijn aan venster: gewoonlijk is donker de tegenhanger van lichte thema's. Kan gebruikt worden voor emphasis in kleine gebieden van de toepassing

Hier is een voorbeeld dat presenteert hoe kleurensets geërfd worden en gebruikt kunnen worden om verschillende componenten te onderscheiden. Een grote rand is toegevoegd om kleuren te laten contrasteren.

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

Aangepaste kleuren gebruiken

Hoewel het ontmoedigd wordt om hard gecodeerde kleuren te gebruiken, biedt Kirigami een meer te onderhouden manier om een aangepaste hard gecodeerd palet aan een item en al zijn kinderen toe te kennen, dat biedt het definiëren van zulke aangepaste kleuren op alleen één plaats:

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
        // Opmerking: onafhankelijk van welke kleurenset wordt gebruikt, wordt aanbevolen om alle
        // beschikbare kleuren van het thema te vervangen, om slechte combinaties van kleuren te
        // vermijden

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Definieer alle andere door u gewenste kleuren

        // Dits zal "#b9d795" zijn
        color: Kirigami.Theme.backgroundColor

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