Färger och teman i Kirigami

Få programmet att följa din användarfärguppsättning

Kirigami har en färgpalett som följer systemfärgerna, för att integreras bättre på plattformen det kör på (dvs. Plasma-skrivbord, Plasma-mobil, GNOME, Android, etc.).

Alla QML-komponenter i Kirigami och alla Qt Quick Controls 2 QML-komponenter följer redan normalt paletten, så oftast ska ingen egen färgläggning behövas för kontrollerna.

Primitiva komponenter såsom Rectangle ska alltid färgläggas med färgpaletten som tillhandahålls av Kirigami via bifogade egenskapen Theme .

Hårdkodade färger i QML, såsom #32b2fa eller red ska oftast undvikas. Om det verkligen är nödvändigt att ha element med egna färger, ska det vara ett område där bara egna färger används (oftast i programmets innehållsområde och aldrig i omgivningen som verktygsrader eller dialogrutor), exempelvis kan inte en hårdkodad black förgrund användas över en Kirigami.Theme.backgroundColor bakgrund, eftersom om plattformen använder ett mörkt färgschema ser resultatet dåligt ut med kontrast mellan svart ovanpå nästan svart.

Tema

För mer information om klassen Theme i Kirigami, se dokumentationen över programmeringsgränssnittet

Kirigami.Theme är en bifogad egenskap, och är därför tillgänglig för användning i alla QML-objekt. Den innehåller alla tillgängliga färger som egenskaper i paletten, och vilken palett som ska användas, som egenskapen colorSet.

Exempel:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Färguppsättning

Beroende på var en kontroll är placerad, ska den använda olika färguppsättningar: exempelvis (med färgtemat Breeze ljus) är den normala bakgrunden i objektvyer nästan vit, medan i andra områden, såsom verktygsrader och dialogrutor, är den normala bakgrundsfärgen grå.

Om du tilldelar ett objekt en färguppsättning, ärver alla dess underliggande objekt (rekursivt) den automatiskt (om inte egenskapen inherit explicit har tilldelats false, vilket alltid bör göras när utvecklaren vill tvinga användning av en viss färguppsättning) så att det är enkelt att ändra färger för en hel objekthierarki utan att röra något av objekten själva.

Kirigami.Theme stöder fem olika färguppsättningar:

  • View: Färguppsättning för objektvyer, ofta de ljusaste av alla (i ljusa teman)
  • Window: Förvald färguppsättning för fönster och "kromområden"
  • Button: Färguppsättning använd av knappar
  • Selection: Färguppsättning använd av markerade områden
  • Tooltip: Färguppsättning använd av verktygstips
  • Complementary: Färguppsättning avsedd att vara komplementär till Fönster: oftast är den mörk också i ljusa teman. Kan användas för "eftertryck" på små områden i programmet.

Exempel:

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

// Kommentarerna antar att systemet använder temat Breeze ljust
...
Rectangle {
    // En grå färg används, eftersom förvald färguppsättning är Window
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // Texten är nästan svart, som definieras i färguppsättningen Window
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Använda mängden för ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Ärv inte från överliggande objekt
        Kirigami.Theme.inherit: false

        // Det här är en nästan vit färg
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Det här är också en nästan vit färg, eftersom colorSet ärvs från överliggande
            // objektet som är View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // Texten är nästan svart, som definieras i färguppsättningen View
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Använda mängden Complementary
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Ärv inte från överliggande objekt
            Kirigami.Theme.inherit: false

            // Det här är nästan svart eftersom i färguppsättningen Complementary är bakgrundsfärgen
            // mörk.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // Texten är nästan vit, som definieras i färguppsättningen Complementary
                text: i18n("hello")
            }
        }
    }
}

Vissa komponenter såsom beteckningar ärver automatiskt färguppsättningen, vissa andra komponenter har en fast färguppsättning, exempelvis är knappar låsta till färguppsättningen Button. Om det är önskvärt för en knapp att ärva överliggande färguppsättning, ska egenskapen inheritexplicit tilldelas 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")
}

Skärmbild av en jämförelse mellan en knapp som ärver och en som inte gör det

Använda egna färger

Även om användning av hårdkodade färger avråds från, erbjuder Kirigami ett mer underhållsbart sätt att tilldela en egen hårdkodad palett till ett objekt och alla dess underliggande objekt, som gör det möjligt att definiera sådana egna färger på ett ställe och bara en gång:

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

Skärmbild som visar koden ovan med qmlscene, vi kan se två rektanglar med två olika färger