Barve in teme v Kirigamiju

Naj vaša aplikacija sledi barvni shemi uporabnika

Kirigami ima barvno paleto, ki sledi sistemskim barvam, za boljšo integracijo na platformi, kjer se izvaja (npr. Plasma Desktop, Plasma Mobile, GNOME, Android itd.).

Vse QML komponente Kirigamija in vse Qt Quick Controls bodo že privzeto sledile tej paleti, tako da običajno ni treba barvanja po meri za vse kontrolnike.

Primitivne komponente, kot je Rectangle, morajo biti vedno obarvane z barvno paleto, ki jo ponuja Kirigami prek priložene lastnosti Kirigami.Theme.

Običajno se je treba izogibati trdo kodiranim barvam v QML, kot sta #32b2fa ali rdeča; če je res potrebno imeti elemente z barvami po meri, mora biti to območje, kjer se uporabljajo samo barve po meri (običajno v področju vsebine aplikacije in nikoli v kromiranih območjih, kot so orodne vrstice ali pogovorna okna). Na primer, trdo kodiranega črnega ospredja ni mogoče uporabiti prek ozadja Kirigami.Theme.backgroundColor, ker če platforma uporablja temno barvno shemo, bo rezultat bo imel slab kontrast s črno nad skoraj črno. To je težava z dostopnostjo in se ji je treba izogibati.

Opomba

Če že res morate uporabljati barve po meri, si oglejte Kontrast, da zagotovite, da izbrane barve ustrezajo priporočilom WCAG.

Tema

Kirigami.Theme je priložena lastnost, zato je na voljo za uporabo za katero koli postavko QML. Njegove lastnosti vključujejo vse barve, ki so na voljo v paleti, in katero paleto uporabiti, na primer lastnost 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
        }
    }
}

Galerija Kirigami ponuja primer kode, ki prikazuje vse barve, ki so na voljo za Kirigami prek Kirigami.Theme. To vključuje vsa njihova stanja: če kliknete zunaj okna, se barve spremenijo v neaktivno stanje, in če sistem preklopite na temno temo, se morajo temne različice barv prikazati v realnem času.

Barvni nabor

Glede na to, kje se nahaja kontrolnik, bi moral uporabiti drugačen nabor barv. Primer (s temo svetlih barv Breeze/Sapica): v pogledih Views je navadno ozadje skoraj belo, medtem ko je v drugih območjih kot so orodne vrstice ali pogovorna okna, navadno barva ozadja siva.

Če definirate nabor barv za element, ga bodo vsi njegovi podrejeni elementi samodejno rekurzivno podedovali (razen če je lastnost inherit izrecno nastavljena na false' , kar je treba narediti vedno, ko želi razvijalec vsiliti določen nabor barv), tako da je enostavno spremeniti barve za celotno hierarhijo elementov, ne da bi se dotaknili samih elementov.

Kirigami.Theme podpira 5 različnih barvnih naborov:

Pogled (View): barvni nabor za poglede elementov, običajno najsvetlejši od vseh (v svetlih barvnih temah)
Okno (Window): Nabor barv za območja oken in krome (to je tudi privzeti nabor barv)
Gumb (Button): nabor barv, ki ga uporabljajo gumbi
Izbira (Selection): nabor barv, ki ga uporabljajo izbrana območja
Namig (Tooltip): nabor barv, ki ga uporabljajo namigi orodij
Komplementarni (Complementary): nabor barv, ki naj bi bil komplementaren z oknom: ponavadi temno tudi v svetlobnih temah. Se lahko uporablja za poudarek na majhnih območjih aplikacije

Tu je primer, ki prikazuje, kako se podedujejo nabori barv in jih je mogoče uporabiti za razlikovanje različnih komponent. Dodana je velika obroba za kontrast barvam.

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

Kako se nabori barv razlikujejo v Sapici/Breeze

Kako se nabori barv razlikujejo v Temni sapici/Breeze Dark

Uporaba barv po meri

Čeprav odsvetujemo uporabo trdo določenih barv, ponuja Kirigami način za lažje vzdrževanje za dodeljevanje v kodi določene palete po meri elementu in vsem njegovim podrejenim, kar omogoča, da opredelite takšne barve po meri na enem samem mestu:

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
        // OPOMBA: ne glede na uporabljeni barvni nabor je priporočljivo zamenjati vse razpoložljive
        // barve v temi, da se izognete slabo kontrastnim barvam

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Ponovno določite vse druge barve, ki jih želite

        // To bo "#b9d795"
        color: Kirigami.Theme.backgroundColor

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

Naslednji koraki

Tipografija