Colors and themes in Kirigami

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.

Os componentes primitivos como o Rectangle deverão sempre ser coloridos com a paleta de cores oferecida pelo Kirigami através da propriedade Theme associada.

As cores fixas no QML, como por exemplo #32b2fa ou red devem normalmente ser evitadas; se é realmente necessário ter elementos com cores personalizadas, deverá ser uma área onde só são usadas cores personalizadas (normalmente na área de conteúdo da aplicação, e nunca em outras áreas, como as barras de ferramentas ou janelas); por exemplo, um texto fixo em black não poderá ser usado sobre um fundo Kirigami.Theme.backgroundColor , porque se a plataforma usar um esquema de cores escuras, o resultado terá um contraste fraco de preto sobre quase-preto. Isto é um problema, do ponto de vista de acessibilidade, e deverá ser evitado.

Tema

O Kirigami.Theme é uma propriedade anexada, pelo que está disponível para ser usada em qualquer item do QML. Contém como propriedades todas as cores disponíveis na paleta e qual a paleta a usar na propriedade colorSet .

Exemplo:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

O Kirigami Gallery oferece um exemplo de código que demonstra todas as cores disponíveis para o Kirigami através do Kirigami.Theme . Isto inclui todos os seus estados: se carregar fora da janela, as cores mudam para o seu estado inactivo, e se mudar o seu sistema para um tema escuro, deverão aparecer as cores na sua variante escura em tempo-real.

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.

Se tiver uma cor definida para um dado item, todos os seus itens-filhos irão herdar essa cor de forma recursiva e automática (a menos que a propriedade inherit tenha sido explicitamente configurada como false, o que deverá sempre ser feito quando o programador quiser forçar um conjunto de cores específico), pelo que é fácil modificar as cores para uma hierarquia inteira de itens, sem tocar em nenhum dos itens propriamente ditos.

O Kirigami.Theme suporta 5 diferentes conjuntos de cores:

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

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:

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