Cores e Temas no 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 Qt Quick 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.

Tema

Para mais informações sobre a class Theme do Kirigami, veja a documentação da API

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.11
import org.kde.kirigami 2.9 as Kirigami

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

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 áreas de itens, 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: Predefinido Conjunto de cores para as janelas e áreas de desenho
  • 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

Exemplo:

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

// Os comentários assumem que o sistema usa o tema de cores Brisa Claro
...
Rectangle {
    // Será usada uma cor acinzentada, já que o conjunto de cores predefinido é o Window
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // O texto será quase preto, como definido no conjunto de cores Window
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Uso do conjunto do ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Não herdar do pai
        Kirigami.Theme.inherit: false

        // Esta será uma cor praticamente branca
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Esta também será uma cor próxima do branco, dado que o 'colorSet' é herdado do pai e
            // será o View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // O texto será praticamente preto, como definido no conjunto de cores View
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Usar o conjunto Complementary
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Não herdar do pai
            Kirigami.Theme.inherit: false

            // Esta será uma cor praticamente preta, dado que no conjunto de cores Complementary a
            // cor de fundo é escura.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // O texto será praticamente branco, como definido no conjunto de cores
                // Complementary
                text: i18n("hello")
            }
        }
    }
}

Alguns componentes como as Labels irão herdar automaticamente e por omissão o conjunto de cores, enquanto outros componentes têm um conjunto de cores fixo; por exemplo, os Buttons têm o conjunto de cores Button fixo. Se desejar que o botão herde o conjunto de cores do elemento-pai, a propriedade inherit terá de ser configurada explicitamente como true:

import QtQuick 2.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami

Controls.Button {
    Kirigami.Theme.inherit: true
    text: i18n("ok")
}

Imagem de uma comparação entre um botão com herança e um sem herança

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.11
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 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: parent.height / 2
        width: parent.width / 2
        color: Kirigami.Theme.textColor
    }
}

Imagem que mostra o código acima com o 'qmlscene', onde podemos ver dois rectângulos com duas cores diferentes