Colors and themes in Kirigami

Få programmet att följa din användarfärguppsättning

Kirigami har en färgpalett som följer systemfärgerna, för att integreras bättre med plattformen det kör på (dvs. Plasma-skrivbord, Plasma-mobil, GNOME, Android, etc.).

Alla QML-komponenter i Kirigami och QtQuick ska redan normalt följa paletten, så oftast ska ingen egen färgläggning behövas för kontrollerna.

Primitiva komponenter såsom Rectangle ska alltid färgläggas med färgpaletten som tillhandahålls av Kirigami via bifogade egenskapen Kirigami.Theme .

Hårdkodade färger i QML, såsom #32b2fa eller red ska oftast undvikas. Om det verkligen är nödvändigt att ha element med egna färger, ska det vara ett område där bara egna färger används (oftast i programmets innehållsområde och aldrig i omgivningen som verktygsrader eller dialogrutor). Exempelvis kan inte en hårdkodad black förgrund användas över en Kirigami.Theme.backgroundColor bakgrund, eftersom om plattformen använder ett mörkt färgschema har resultatet dålig kontrast med svart ovanpå nästan svart. Det är en tillgänglighetsfråga och bör undvikas.

Anmärkning

Om du verkligen behöver använda egna färger, titta på Kontrast för att säkerställa att färgerna du väljer har bra kontrast och är [WCAG-kompatibla](https://sv .wikipedia.org/wiki/Web_Content_Accessibility_Guidelines).

Tema

Kirigami.Theme är en bifogad egenskap, och är därför tillgänglig för användning i alla QML-objekt. Den innehåller alla tillgängliga färger som egenskaper i paletten, och vilken palett som ska användas, som egenskapen colorSet .

Exempel:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Kirigami galleri tillhandahåller ett kodexempel som visar upp [alla färger tillgängliga för Kirigami](https://invent.kde.org/sdk/kirigami-gallery/-/blob/master/src /data/contents/ui/gallery/ColorsGallery.qml) genom Kirigami.Theme . Det omfattar alla deras tillstånd: om du klickar utanför fönstret ändras färgerna till sitt inaktiva tillstånd, och om du byter till ett mörkt tema på systemet ska de mörka varianterna av färgerna dyka upp i realtid.

Färguppsättning

Beroende på var en kontroll är placerad, ska den använda olika färguppsättningar: exempelvis när färgtemat Breeze ljus används i Views, är den normala bakgrunden nästan vit, medan i andra områden, såsom verktygsrader och dialogrutor, är den normala bakgrundsfärgen grå.

Om du definierar ett objekt en färguppsättning, ärver alla dess underliggande objekt (rekursivt) den automatiskt (om inte egenskapen inherit explicit har tilldelats false, vilket alltid bör göras när utvecklaren vill tvinga användning av en viss färguppsättning) så att det är enkelt att ändra färger för en hel objekthierarki utan att röra något av objekten själva.

Kirigami.Theme stöder fem olika färguppsättningar:

View: Färguppsättning för objektvyer, ofta de ljusaste av alla (i ljusa teman)
Window: Färguppsättning för fönster och kromområden (det är också förvald färguppsättning)
Button: Färguppsättning använd av knappar
Selection: Färguppsättning använd av markerade områden
Tooltip: Färguppsättning använd av verktygstips
Complementary: Färguppsättning avsedd att vara komplementär till Fönster: oftast är den mörk också i ljusa teman. Kan användas för eftertryck på små områden i programmet.

Här är ett exempel som visar hur färguppsättningar ärvs och kan användas för att särskilja olika komponenter. En stor kant har lagts till för att kontrastera färger.

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

Hur färguppsättningar skiljer sig i Breeze

Hur färguppsättningar skiljer sig i Breeze mörk

Använda egna färger

Även om användning av hårdkodade färger avråds från, erbjuder Kirigami ett mer underhållsbart sätt att tilldela en egen hårdkodad palett till ett objekt och alla dess underliggande objekt, som gör det möjligt att definiera sådana egna färger på ett ställe och bara en gång:

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

Använda Kirigami galleri

Typografi