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

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

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

Exemplo com cores personalizadas