Colores y temas en Kirigami

Haga que su aplicación siga el esquema de colores del usuario

Kirigami tiene una paleta de colores que sigue los colores del sistema para integrarse mejor en la plataforma en la que se ejecuta (es decir, el escritorio Plasma, Plasma Mobile, GNOME, Android, etc.).

Todos los componentes QML de Kirigami y todos los componentes QML de Qt Quick Controls 2 ya seguirán esta paleta de forma predeterminada, por lo que normalmente no se necesitarán colores personalizados para dichos controles.

Los componentes primitivos, como Rectangle, siempre se deben colorear con la paleta de colores proporcionada por Kirigami a través de la propiedad adjunta Theme .

Los colores codificados en QML, como #32b2fa o red se deberían evitar como norma general; si es realmente necesario tener elementos con colores personalizados, debe ser un área donde solo se usen colores personalizados (generalmente, en el área de contenido de la aplicación, y nunca en el cromo, como barras de herramientas o cuadros de diálogo). Por ejemplo, un primer plano black codificado no se puede usar sobre un fondo Kirigami.Theme.backgroundColor, porque si la plataforma usa un esquema de color oscuro, el resultado se verá pobremente contrastado en negro sobre casi negro.

Tema

Para más información sobre la clase Theme de Kirigami, consulte la documentación de la API .

Kirigami.Theme es una propiedad adjunta, por lo que se puede usar en cualquier elemento QML. Contiene como propiedades todos los colores disponibles en la paleta, y la paleta a usar, como la propiedad colorSet.

Ejemplo:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Conjunto de colores

Dependiendo de dónde esté situado un control, debería usar un conjunto de colores diferente. Por ejemplo (con el tema de color Brisa claro) en itemviews, el fondo normal es casi blanco, mientras que en otras regiones, como las barras de herramientas o los diálogos, el color de fondo normal es el gris.

Si asigna un conjunto de colores para un elemento, todos sus elementos hijos (de forma recursiva) lo heredarán automáticamente (a menos que la propiedad inherit se haya definido explícitamente como false, lo que se debe hacer siempre que el desarrollador quiera forzar un conjunto de colores específico), por lo que es fácil cambiar los colores de una jerarquía completa de elementos sin tocar ninguno de los elementos en sí.

Kirigami.Theme permite 5 conjuntos de colores distintos:

  • View: Conjunto de colores para las vistas de elementos; suele ser el más claro de todos (en los temas de color claros).
  • Window: Conjunto de colores predeterminado para las ventanas y para las áreas "cromadas".
  • Button: Conjunto de colores usado por los botones.
  • Selection: Conjunto de colores usado por las áreas seleccionadas.
  • Tooltip: Conjunto de colores usado por las ayudas emergentes.
  • Complementary: Conjunto de colores a usar como complementario de Window; normalmente es oscuro, incluso en los temas claros. Se puede usar para "enfatizar" pequeñas áreas de la aplicación.

Ejemplo:

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

// Los comentarios asumen que el sistema usa el tema de color Brisa claro.
...
Rectangle {
    // Se usará un color gris cuando el conjunto de colores predeterminado es Window.
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // El texto será casi negro, como se define en el conjunto de colores de la ventana.
        text: i18n("hello")
    }

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

        // No heredar del padre
        Kirigami.Theme.inherit: false

        // Este color será casi blanco
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Este color también será casi blanco, ya que el colorSet se hereda del padre y se
            // visualizará
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // El texto será casi negro, como se define en el conjunto de colores de la vista
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Uso del conjunto complementario
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // No heredar del padre
            Kirigami.Theme.inherit: false

            // Esto será casi negro, ya que en el conjunto de colores complementarios el color de
            // fondo es oscuro.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // El texto será casi blanco, como se define en el conjunto de colores
                // complementarios.
                text: i18n("hello")
            }
        }
    }
}

Algunos componentes, como las etiquetas, heredarán automáticamente de forma predeterminada el conjunto de colores; otros componentes tienen un conjunto de colores fijo (por ejemplo, los botones tienen fijado el conjunto de colores Button). Si se desea que el botón herede el conjunto de colores del padre, se debería asignar explícitamente el valor true a la propiedad inherit:

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

Captura de pantalla de una comparación entre un botón que hereda y otro que no

Uso de colores personalizados

Aunque no se recomienda usar colores codificados, Kirigami ofrece un modo más fácil de mantener para asignar una paleta personalizada codificada a un elemento y a todos sus hijos que permitirá definir dichos colores personalizados en un único lugar:

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

Captura de pantalla que muestra el código anterior con qmlscene; podemos ver dos rectángulos con dos colores diferentes