Colors and themes in Kirigami

Fazer com que a sua aplicação siga o esquema de cores do seu utilizador

O Kirigami tem uma paleta de cores que segue as cores do sistema, para se integrar melhor com a plataforma na qual se está a executar (i.e., Plasma no computador, Plasma Mobile, GNOME, Android, etc.).

Todos os componentes QML do Kirigami e todos os componentes QML do QtQuick Controls 2 seguem esta paleta por omissão, pelo que normalmente não será necessária mais nenhuma coloração personalizada para todos estes controlos.

Primitive components such as Rectangle should always be colored with the color palette provided by Kirigami via the Kirigami.Theme attached property.

Hardcoded colors in QML, such as #32b2fa or red, should usually be avoided; if it is really necessary to have elements with custom colors, it should be an area where only custom colors are used (usually in the content area of the app, and never in chrome areas such as toolbars or dialogs). For instance, a hardcoded black foreground cannot be used over a Kirigami.Theme.backgroundColor background, because if the platform uses a dark color scheme the result will have poor contrast with black over almost black. This is an accessibility issue and should be avoided.

Nota

Se precisar realmente de usar cores personalizadas, consulte o Kontrast para garantir que as cores que escolher têm bom contraste e são compatíveis com a WCAG.

Tema

Kirigami.Theme is an attached property, and therefore it is available to use for any QML item. Its properties include all the colors available in the palette, and what palette to use, such as the colorSet property.

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 provides a code example showcasing all colors available for Kirigami through Kirigami.Theme. This includes all their states: if you click outside the window, the colors change to their inactive state, and if you switch your system to a dark theme, the dark variants of the colors should show up in real time.

O componente Colors na Galeria do Kirigami

Conjunto de Cores

Dependendo de onde se localiza um dado controlo, deverá usar um conjunto de cores diferente: por exemplo, (com o tema de cores Brisa Claro) nas Views, o fundo normal é quase branco, enquanto noutras regiões, como as barras de ferramentas ou nas janelas, a cor de fundo normal é o cinzento.

If you define a color set for an item, all of its child items will recursively inherit it automatically (unless the property inherit has explicitly been set to false, which should always be done when the developer wants to force a specific color set) so it is easy to change colors for an entire hierarchy of items without touching any of the items themselves.

Kirigami.Theme supports 5 different color sets:

View: Conjunto de cores das janelas de itens; normalmente é o mais claro de todos (em temas de cores claras)
Window: Conjunto de cores para as janelas e áreas de desenho (este também é o conjunto de cores predefinido)
Button: Conjunto de cores usado pelos botões
Selection: Conjunto de cores usado pelas áreas seleccionadas
Tooltip: Conjunto de cores usadas pelas dicas
Complementary: Conjunto de cores complementar ao Window: normalmente é escuro, mesmo em temas claros. Poderá ser usado para enfatizar pequenas áreas da aplicação

Aqui está um exemplo que demonstra como são herdados os conjuntos de cores e como podem ser usados para distinguir entre os diferentes componentes. Foi adicionado um contorno grande às cores em contraste.

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

Como diferem os conjuntos de cores no Brisa

Como diferem os conjuntos de cores no Brisa Escuro

Usar Cores Personalizadas

Ainda que seja desencorajado o uso de cores fixas, o Kirigami oferece uma forma mais fácil de manter uma paleta de cores personalizadas fixas para um item e todos os seus filhos, a qual permitirá definir essas cores personalizadas em apenas um sítio:

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
        // 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 other colors you want

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

Próximos passos

Tipografia