Cores e temas no Kirigami

O Kirigami possui uma paleta de cores que segue as cores do sistema para melhor integração com a plataforma em que está sendo executado (por exemplo, Plasma Desktop, Plasma Mobile, GNOME, Android, etc.).

Todos os componentes QML do Kirigami e do QtQuick Controls já devem seguir esta paleta por padrão, portanto, normalmente, nenhuma coloração personalizada é necessária para esses controles.

Componentes primitivos como Rectangle devem sempre ser coloridos com a paleta de cores fornecida pelo Kirigami por meio da propriedade anexada Kirigami.Theme.

Cores codificadas em QML, como #32b2fa ou vermelho, geralmente devem ser evitadas; se for realmente necessário ter elementos com cores personalizadas, deve ser uma área onde apenas cores personalizadas sejam usadas (geralmente na área de conteúdo do aplicativo e nunca em áreas comuns, como barras de ferramentas ou caixas de diálogo). Por exemplo, um primeiro plano preto codificado não pode ser usado sobre um fundo Kirigami.Theme.backgroundColor, porque se a plataforma usar um esquema de cores escuras, o resultado terá um contraste ruim com preto sobre quase preto. Isso é um problema de acessibilidade e deve ser evitado.

Tema

Kirigami.Theme é uma propriedade anexada e, portanto, está disponível para uso em qualquer item QML. Suas propriedades incluem todas as cores disponíveis na paleta e qual paleta usar, como a propriedade 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
        }
    }
}

A Galeria Kirigami fornece um exemplo de código mostrando todas as cores disponíveis para Kirigami por meio do Kirigami.Theme. Isso inclui todos os seus estados: se você clicar fora da janela, as cores mudam para o estado inativo, e se você alternar seu sistema para um tema escuro, as variantes escuras das cores devem aparecer em tempo real.

Conjunto de cor

Dependendo de onde um controle estiver localizado, ele deverá usar um conjunto de cor diferente: por exemplo, quando o esquema de cor Breeze Light é usado em Visualizações, o fundo normal é quase branco, enquanto em outras regiões, como barras de ferramentas ou caixas de diálogo, a cor de fundo normal é cinza.

Se você definir um conjunto de cor para um item, todos os seus itens filhos o herdarão recursivamente de forma automática (a menos que a propriedade inherit tenha sido explicitamente definida como false, o que sempre deve ser feito quando o desenvolvedor deseja forçar um conjunto de cor específico), de modo que é fácil alterar as cores de uma hierarquia inteira de itens sem tocar em nenhum dos itens em si.

Kirigami.Theme suporta 5 conjuntos de cores diferentes:

• Visualização: Conjunto de cor para visualização de itens, geralmente o mais claro de todos (em temas de cores claras)
• Janela: Conjunto de cor para janelas e áreas cromadas (este também é o conjunto de cor padrão)
• Botão: Conjunto de cor usado pelos botões
• Seleção: Conjunto de cor usado pelas áreas selecionadas
• Dica: Conjunto de cor usado pelas dicas
• Complementar: Conjunto de cor que visa complementar a Janela: geralmente escuro, mesmo em temas claros. Pode ser usado para dar ênfase em pequenas áreas do aplicativo

Aqui está um exemplo que mostra como os conjuntos de cor são herdados e podem ser usados para distinguir diferentes componentes. Uma borda grande foi adicionada para contrastar as cores.

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

Usando cores personalizadas

Embora seja desencorajado o uso de cores codificadas, o Kirigami oferece uma maneira mais sustentável de atribuir uma paleta personalizada codificada a um item e a todos os seus filhos, o que permite definir essas cores personalizadas em um único, e apenas um, lugar:

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
        // NOTA: independentemente do conjunto de cor utilizado, é recomendável substituir todas as
        // cores disponíveis no Tema, para evitar cores com muito contraste

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Redefina todas as outras cores que você desejar

        // Isto será "#b9d795"
        color: Kirigami.Theme.backgroundColor

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