Kleuren en thema's in Kirigami
Kirigami heeft een kleurenpalet dat de systeemkleuren volgt, om beter te integreren op het platform waarop het actief is (d.w.z. Plasma bureaublad, Plasma mobiel, GNOME, Android, etc.).
Alle QML componenten van Kirigami en alle Qt Quick Controls zouden het pallet al standaard moeten volgen, dus zal gewoonlijk helemaal geen aangepaste kleuring nodig zijn voor deze besturingen.
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.
Notitie
Als u echt aangepaste kleuren nodig hebt, kijk dan op Kontrast om er zeker van te zijn dat de kleuren die u kiest een goed contrast hebben en WCAG compliant zijn.Thema
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.

De kleurencomponent in Kirigami galerij
Kleurenset
Afhankelijk van waar een besturing is gelokaliseerd, zou het een andere kleurset moeten gebruiken: bijvoorbeeld, (met het kleurenthema Breeze light) in Views, is de normale achtergrond bijna wit, terwijl in andere gebieden, zoals werkbalken of dialogen, de normale achtergrondkleur grijs is.
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:
- Beeld: kleurenset voor item weergaven, gewoonlijk de lichtste van allen (in lichte kleurenthema's)
- Venster: kleurenset voor vensters en chroom-gebieden (dit is ook de standaard kleurenset)
- Knop: kleurenset gebruikt door knoppen
- Selectie: kleurenset gebruikt door geselecteerde gebieden
- Tekstballon: kleurenset gebruikt door tekstballonnen
- Complementair: kleurenset bedoeld om complementair te zijn aan venster: gewoonlijk is donker de tegenhanger van lichte thema's. Kan gebruikt worden voor emphasis in kleine gebieden van de toepassing
Hier is een voorbeeld dat presenteert hoe kleurensets geërfd worden en gebruikt kunnen worden om verschillende componenten te onderscheiden. Een grote rand is toegevoegd om kleuren te laten contrasteren.
|
|

Hoe kleurensets in Breeze verschillen

Hoe kleurensets in Breeze Dark verschillen
Aangepaste kleuren gebruiken
Hoewel het ontmoedigd wordt om hard gecodeerde kleuren te gebruiken, biedt Kirigami een meer te onderhouden manier om een aangepaste hard gecodeerd palet aan een item en al zijn kinderen toe te kennen, dat biedt het definiëren van zulke aangepaste kleuren op alleen één plaats:
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
// Opmerking: onafhankelijk van welke kleurenset wordt gebruikt, wordt aanbevolen om alle
// beschikbare kleuren van het thema te vervangen, om slechte combinaties van kleuren te
// vermijden
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.backgroundColor: "#b9d795"
Kirigami.Theme.textColor: "#465c2b"
Kirigami.Theme.highlightColor: "#89e51c"
// Definieer alle andere door u gewenste kleuren
// Dits zal "#b9d795" zijn
color: Kirigami.Theme.backgroundColor
Rectangle {
// Dit zal "#465c2b" zijn
anchors.centerIn: parent
height: Math.round(parent.height / 2)
width: Math.round(parent.width / 2)
color: Kirigami.Theme.textColor
}
}
}

Voorbeeld met eigen/aangepaste kleuren