Barve in teme v Kirigamiju
Kirigami ima barvno paleto, ki sledi sistemskim barvam, za boljšo integracijo na platformi, kjer se izvaja (npr. Plasma Desktop, Plasma Mobile, GNOME, Android itd.).
Vse QML komponente Kirigamija in vse Qt Quick Controls bodo že privzeto sledile tej paleti, tako da običajno ni treba barvanja po meri za vse kontrolnike.
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.
Opomba
Če že res morate uporabljati barve po meri, si oglejte Kontrast, da zagotovite, da izbrane barve ustrezajo priporočilom WCAG.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.

Komponenta barv v Galeriji Kirigami
Barvni nabor
Glede na to, kje se nahaja kontrolnik, bi moral uporabiti drugačen nabor barv. Primer (s temo svetlih barv Breeze/Sapica): v pogledih Views je navadno ozadje skoraj belo, medtem ko je v drugih območjih kot so orodne vrstice ali pogovorna okna, navadno barva ozadja siva.
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:
- Pogled (View): barvni nabor za poglede elementov, običajno najsvetlejši od vseh (v svetlih barvnih temah)
- Okno (Window): Nabor barv za območja oken in krome (to je tudi privzeti nabor barv)
- Gumb (Button): nabor barv, ki ga uporabljajo gumbi
- Izbira (Selection): nabor barv, ki ga uporabljajo izbrana območja
- Namig (Tooltip): nabor barv, ki ga uporabljajo namigi orodij
- Komplementarni (Complementary): nabor barv, ki naj bi bil komplementaren z oknom: ponavadi temno tudi v svetlobnih temah. Se lahko uporablja za poudarek na majhnih območjih aplikacije
Tu je primer, ki prikazuje, kako se podedujejo nabori barv in jih je mogoče uporabiti za razlikovanje različnih komponent. Dodana je velika obroba za kontrast barvam.
|
|

Kako se nabori barv razlikujejo v Sapici/Breeze

Kako se nabori barv razlikujejo v Temni sapici/Breeze Dark
Uporaba barv po meri
Čeprav odsvetujemo uporabo trdo določenih barv, ponuja Kirigami način za lažje vzdrževanje za dodeljevanje v kodi določene palete po meri elementu in vsem njegovim podrejenim, kar omogoča, da opredelite takšne barve po meri na enem samem mestu:
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
// OPOMBA: ne glede na uporabljeni barvni nabor je priporočljivo zamenjati vse razpoložljive
// barve v temi, da se izognete slabo kontrastnim barvam
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.backgroundColor: "#b9d795"
Kirigami.Theme.textColor: "#465c2b"
Kirigami.Theme.highlightColor: "#89e51c"
// Ponovno določite vse druge barve, ki jih želite
// To bo "#b9d795"
color: Kirigami.Theme.backgroundColor
Rectangle {
// To bo "#465c2b"
anchors.centerIn: parent
height: Math.round(parent.height / 2)
width: Math.round(parent.width / 2)
color: Kirigami.Theme.textColor
}
}
}

Primer z barvami po meri