Färger och teman i Kirigami
Kirigami har en färgpalett som följer systemfärgerna, för att integreras bättre med plattformen det kör på (dvs. Plasma-skrivbord, Plasma-mobil, GNOME, Android, etc.).
Alla QML-komponenter i Kirigami och QtQuick ska redan normalt följa paletten, så oftast ska ingen egen färgläggning behövas för kontrollerna.
Primitive components such as Rectangle should always be colored with the color palette provided by Kirigami via the Kirigami.Theme attached property.
Hardcoded colors in QML, such as #32b2fa
or red
, should usually be avoided; if it is really necessary to have elements with custom colors, it should be an area where only custom colors are used (usually in the content area of the app, and never in chrome areas such as toolbars or dialogs). For instance, a hardcoded black
foreground cannot be used over a Kirigami.Theme.backgroundColor background, because if the platform uses a dark color scheme the result will have poor contrast with black over almost black. This is an accessibility issue and should be avoided.
Anmärkning
Om du verkligen behöver använda egna färger, titta på Kontrast för att säkerställa att färgerna du väljer har bra kontrast och är [WCAG-kompatibla](https://sv .wikipedia.org/wiki/Web_Content_Accessibility_Guidelines).Tema
Kirigami.Theme is an attached property, and therefore it is available to use for any QML item. Its properties include all the colors available in the palette, and what palette to use, such as the colorSet property.
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
}
}
}
Kirigami Gallery provides a code example showcasing all colors available for Kirigami through Kirigami.Theme. This includes all their states: if you click outside the window, the colors change to their inactive state, and if you switch your system to a dark theme, the dark variants of the colors should show up in real time.

Färgkomponenterna i Kirigami galleri
Färguppsättning
Beroende på var en kontroll är placerad, ska den använda olika färguppsättningar: exempelvis när färgtemat Breeze ljus används i Views, är den normala bakgrunden nästan vit, medan i andra områden, såsom verktygsrader och dialogrutor, är den normala bakgrundsfärgen grå.
If you define a color set for an item, all of its child items will recursively inherit it automatically (unless the property inherit has explicitly been set to false
, which should always be done when the developer wants to force a specific color set) so it is easy to change colors for an entire hierarchy of items without touching any of the items themselves.
Kirigami.Theme supports 5 different color sets:
- View: Färguppsättning för objektvyer, ofta de ljusaste av alla (i ljusa teman)
- Window: Färguppsättning för fönster och kromområden (det är också förvald färguppsättning)
- 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.
Här är ett exempel som visar hur färguppsättningar ärvs och kan användas för att särskilja olika komponenter. En stor kant har lagts till för att kontrastera färger.
|
|

Hur färguppsättningar skiljer sig i Breeze

Hur färguppsättningar skiljer sig i Breeze mörk
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:
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
// Observera: Oavsett vilken färguppsättning som används rekommenderas att ersätta alla
// tillgängliga färger i Theme, för att undvika färger med dåligt kontrast
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.backgroundColor: "#b9d795"
Kirigami.Theme.textColor: "#465c2b"
Kirigami.Theme.highlightColor: "#89e51c"
// Definiera om alla andra färger du vill
// Det är "#b9d795"
color: Kirigami.Theme.backgroundColor
Rectangle {
// Det är "#465c2b"
anchors.centerIn: parent
height: Math.round(parent.height / 2)
width: Math.round(parent.width / 2)
color: Kirigami.Theme.textColor
}
}
}

Exempel med egna färger