Koloroj kaj etosoj en Kirigami

Faru vian apon sekvi vian uzantan kolorskemon

Kirigami havas kolorpaletron, kiu sekvas la sistemajn kolorojn por pli bone integriĝi kun la platformo, sur kiu ĝi funkcias (t.e. Plasma Desktop, Plasma Mobile, GNOME, Android, ktp.).

Ĉiuj QML-komponentoj de Kirigami kaj QtQuick Controls jam devus sekvi ĉi tiun paletron defaŭlte, do kutime neniu propra kolorigo devus esti bezonata por ĉi tiuj regiloj.

Primivaj komponantoj kiel Rektangulo devus ĉiam esti kolorigitaj per la kolorpaletro provizita de Kirigami per la kuna propreco Kirigami.Theme .

Malmolkodigitaj koloroj en QML, kiel ekzemple #32b2fa aŭ ruĝa, devus kutime esti evititaj; se vere necesas havi elementojn kun propraj koloroj, ĝi devus esti areo kie nur propraj koloroj estas uzataj (kutime en la enhavareo de la apo, kaj neniam en kromaj areoj kiel ilobretoj aŭ dialogoj). Ekzemple, malmola kodita "nigra" malfono ne povas esti uzata super Kirigami.Theme.backgroundColor fono, ĉar se la platformo uzas malhelan kolorskemon la rezulto havos malbonan. kontrasto kun nigra super preskaŭ nigra. Ĉi tio estas problemo de alirebleco kaj devus esti evitita.

Noto

Se vi vere bezonas uzi proprajn kolorojn, kontrolu Kontrast por certigi, ke la koloroj, kiujn vi elektas, havas bonan kontraston kaj konformas al WCAG. .wikipedia.org/wiki/Web_Content_Accessibility_Guidelines).

Etoso

Kirigami.Theme estas kuna propreco, kaj tial ĝi estas uzebla por iu ajn QML-aĵo. Ĝiaj propraĵoj inkluzivas ĉiujn kolorojn disponeblajn en la paletro, kaj kian paletron uzi, kiel la colorSet propreco.

Ekzemplo:

import QtQuick 2.15
import org.kde.kirigami 2.20 as Kirigami

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Kirigami Gallery disponigas kodekzemplon montrantan [ĉiujn kolorojn disponeblajn por Kirigami](https://invent.kde.org/sdk/kirigami-gallery/-/blob/master/src /data/contents/ui/gallery/ColorsGallery.qml) tra Kirigami.Theme . Ĉi tio inkluzivas ĉiujn iliajn statojn: se vi alklakas ekster la fenestro, la koloroj ŝanĝas al sia neaktiva stato, kaj se vi ŝanĝas vian sistemon al malhela etoso, la malhelaj variantoj de la koloroj aperu en reala tempo.

La Koloroj-komponento en Kirigami Gallery

Koloro Aro

Depende de kie troviĝas regilo, ĝi devus uzi malsaman koloraron: ekzemple, kiam la kolorskemo de Breeze Light estas uzata en [Vidoj](https://doc.qt.io/qt-6/qtquick-modelviewsdata- modelview.html), la normala fono estas preskaŭ blanka, dum en aliaj regionoj, kiel ilobretoj aŭ dialogoj, la normala fonkoloro estas griza.

Se vi difinas koloraron por ero, ĉiuj ĝiaj filaj eroj rekursie heredos ĝin aŭtomate (krom se la propreco heredaĵo estis eksplicite agordita al false, kio devus ĉiam esti farita kiam la programisto volas devigi specifan koloraron) do estas facile ŝanĝi kolorojn por tuta hierarkio de eroj sen tuŝi iun ajn el la eroj mem.

Kirigami.Theme subtenas 5 malsamajn kolorajn arojn:

Vido: Koloro aro por eroj-vidoj, kutime la plej malpeza el ĉiuj (en helkoloraj etosoj)
Fenestro: Koloro aro por fenestroj kaj kromaj areoj (ĉi tio ankaŭ estas la defaŭlta koloraro)
Butono: Koloro uzata de butonoj
Elekto: Koloro uzata de elektitaj areoj
Konsileto: Koloro uzata de konsiletoj
Komplementa: Koloro intencita esti komplementa al Fenestro: kutime malhela eĉ en helaj etosoj. Povas esti uzata por emfazo en malgrandaj areoj de la apliko

Jen ekzemplo montranta kiel koloraroj estas hereditaj kaj povas esti uzataj por distingi malsamajn komponentojn. Granda bordo estis aldonita por kontrasti kolorojn.

 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 2.15
import QtQuick.Controls 2.15 as Controls
import org.kde.kirigami 2.20 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
                }
            }
        }
    }
}

Kiel koloraroj diferencas en Breeze Dark

Uzante Proprajn Kolorojn

Kvankam estas malkuraĝigite uzi malmolkoditajn kolorojn, Kirigami ofertas pli konserveblan manieron asigni propran malmolkoditan paletron al objekto kaj ĉiuj ĝiaj infanoj, kio permesas difini tiajn proprajn kolorojn en unu loko kaj unu nur:

 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.15
import QtQuick.Controls 2.15 as Controls
import org.kde.kirigami 2.20 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: Math.round(parent.height / 2)
        width: Math.round(parent.width / 2)
        color: Kirigami.Theme.textColor
    }
}

Uzante Kirigami Gallery

Tipografio