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 ĉiam estu 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 kutimaj koloroj, ĝi devus esti areo kie nur kutimaj 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 fono Kirigami.Theme.backgroundColor, ĉar se la platformo uzas malhelan kolorskemon la rezulto havos malbonan kontraston 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 proprecoj inkluzivas ĉiujn kolorojn disponeblajn en la paletro, kaj kian paletron uzi, kiel ekzemple la propreco 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 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 temo, 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 eksplicite estis agordita al false, kio ĉiam devas 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
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
                }
            }
        }
    }
}

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:

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
        // RIMARKO: sendepende de la koloraro uzita, estas rekomendite antatataŭigi ĉiujn
        // disponeblajn kolorojn en Etoso por eviti malbone kontrastantajn kolorojn

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Redifini ĉiujn aliajn kolorojn kiejn vi volas

        // Tio ĉi estos "#b9d795"
        color: Kirigami.Theme.backgroundColor

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

Sekvaj paŝoj

Tipografio