Farby a témy v Kirigami

Nechajte vašu aplikáciu nasledovať farebnú schému používateľa

Kirigami má paletu farieb, ktorá nasleduje systémové farby pre lepšiu integráciu s platformou, na ktorej beží (t.j. Plasma Desktop, Plasma Mobile, GNOME, Android atď.).

Všetky QML komponenty Kirigami a QtQuick Controls by už mali túto paletu nasledovať predvolene, takže zvyčajne nie je potrebné vlastné farbenie pre tieto ovládacie prvky.

Primitívne komponenty ako Rectangle by mali byť vždy farbené paletou farieb poskytovanou Kirigami cez pripojenú vlastnosť Kirigami.Theme.

Pevne zakódované farby v QML, ako #32b2fa alebo red, by sa mali zvyčajne vyhýbať; ak je naozaj potrebné mať prvky s vlastnými farbami, mala by to byť oblasť, kde sa používajú iba vlastné farby (zvyčajne v oblasti obsahu aplikácie a nikdy v chrómových oblastiach ako panely nástrojov alebo dialógy). Napríklad pevne zakódovaná black na popredí sa nemôže použiť na pozadí Kirigami.Theme.backgroundColor, pretože ak platforma používa tmavú farebnú schému, výsledok bude mať slabý kontrast s čiernou na takmer čiernom. Toto je problém prístupnosti a malo by sa mu vyhnúť.

Poznámka

Ak naozaj potrebujete použiť vlastné farby, pozrite si Kontrast, aby ste sa uistili, že farby, ktoré si vyberiete, majú dobrý kontrast a sú v súlade s WCAG.

Téma

Kirigami.Theme je pripojená vlastnosť a preto je dostupná na použitie pre akýkoľvek QML prvok. Jej vlastnosti zahŕňajú všetky farby dostupné v palete a akú paletu použiť, ako napríklad vlastnosť 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 poskytuje príklad kódu prezentujúci všetky farby dostupné pre Kirigami cez Kirigami.Theme. Toto zahŕňa všetky ich stavy: ak kliknete mimo okna, farby sa zmenia na ich neaktívny stav, a ak prepnete svoj systém na tmavú tému, tmavé varianty farieb by sa mali zobraziť v reálnom čase.

Farebná sada

V závislosti od toho, kde sa ovládací prvok nachádza, mal by používať inú sadu farieb: napríklad, keď sa použije svetlá farebná schéma Breeze v Zobrazeniach, normálne pozadie je takmer biele, zatiaľ čo v iných oblastiach, ako sú panely nástrojov alebo dialógy, je normálna farba pozadia sivá.

Ak definujete sadu farieb pre prvok, všetky jeho potomkovské prvky ju automaticky rekurzívne zdedia (pokiaľ vlastnosť inherit nebola explicitne nastavená na false, čo by sa malo vždy urobiť, keď chce vývojár vynútiť konkrétnu sadu farieb), takže je jednoduché zmeniť farby pre celú hierarchiu prvkov bez dotyku samotných prvkov.

Kirigami.Theme podporuje 5 rôznych sád farieb:

View: Sada farieb pre zobrazenia položiek, zvyčajne najsvetlejšia zo všetkých (v svetlých farebných témach)
Window: Sada farieb pre okná a chrómové oblasti (toto je tiež predvolená sada farieb)
Button: Farebná sada používaná tlačidlami
Selection: Farebná sada používaná vybranými oblasťami
Tooltip: Farebná sada používaná tooltipmi
Complementary: Sada farieb určená ako doplnková k Window: zvyčajne tmavá aj v svetlých témach. Môže sa použiť na zdôraznenie v malých oblastiach aplikácie

Tu je príklad prezentujúci, ako sa sady farieb dedia a dajú sa použiť na rozlíšenie rôznych komponentov. Pre kontrast farieb bol pridaný veľký okraj.

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

Použitie vlastných farieb

Aj keď sa neodporúča používať pevne zakódované farby, Kirigami ponúka udržiavateľnejší spôsob priradenia vlastnej pevne zakódovanej palety prvku a všetkým jeho potomkom, čo umožňuje definovať takéto vlastné farby na jednom mieste a jedinom:

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
        // POZNÁMKA: bez ohľadu na použitú sadu farieb sa odporúča nahradiť všetky dostupné farby v
        // Theme, aby sa predišlo zle kontrastujúcim farbám

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Predefinujte všetky ostatné farby, ktoré chcete

        // Toto bude "#b9d795"
        color: Kirigami.Theme.backgroundColor

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

Ďalšie kroky

Typografia