Barve in teme v Kirigamiju

Naj vaša aplikacija sledi barvni shemi uporabnika

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 Kirigami's QML komponente in vse Qt Quick Controls 2 QML komponente bodo že sledile tej privzeti paleti, tako da običajno ni treba barvanja po meri na za vse kontrolnike.

Primitivne komponente, kot je Rectangle, morajo biti vedno obarvane z barvno paleto, ki jo kirigami zagotavlja prek Theme priložena lastnost.

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 the chrome 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 look poor contrasting black over almost black.

Tema

Če želite več informacij o razredu Kirigami Theme, si oglejte API docs

'Kirigami.Theme' je priložena lastnost, zato je na voljo za uporabo v vsakem QML predmetu. Vsebuje kot lastnosti vse barve, ki so na voljo v paleti, in katere palete za uporabo, kot lastnost 'colorSet'.

Primer:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

Barvni nabor

Depending on where a control is located, it should use a different color set: for instance, (with the Breeze light color theme) in itemviews, the normal background is almost white, while in other regions, such as toolbars or dialogs, the normal background color is gray.

If you set a color set for an item, all of its child items (recursively) will 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« podpira 5 različnih barvnih naborov:

  • Pogled (View): barvni nabor za poglede elementov, običajno najsvetlejši od vseh (v svetlih barvnih temah)
  • Okno (Window): privzeti barvni nabor za okna in območja »chrome«
  • Gumb (Button): barvni nabor, ki ga uporabljajo gumbi
  • Izbira (Selection): barvni nabor, ki ga uporabljajo izbrana območja
  • Namig (Tooltip): barvni nabor, ki ga uporabljajo namigi orodij
  • Dopolnjevanje (Complementary): barvni nabor je namenjen dopolnjevanje Oknu (Window): običajno je temen tudi v svetlih temah. Lahko se uporablja za »poudarek« na majhnih področjih uporabe

Primer:

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

// Komentarji predvidevajo, da sistem uporablja barvno temo »Breeze Light« (»Svetla sapica«)
...
Rectangle {
    // Uporabljena bo siva barva, saj je privzeti nabor barv Okno (Window)
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // Besedilo bo skoraj črno, kot je opredeljeno v naboru barv Okno (Window)
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Use the set for ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Ne deduj od nadrejenega
        Kirigami.Theme.inherit: false

        // To bo skoraj bela barva
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // This will be a near-white color too, as the colorSet is inherited from the parent and
            // will be View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // Besedilo bo skoraj črno, kot je opredeljeno v naboru barv pogleda
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Uporabi komplementarni nabor
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Ne deduj od nadrejenega
            Kirigami.Theme.inherit: false

            // To bo skoraj črno, saj je v naboru dopolnilnih barv barva ozadja temna.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // Besedilo bo skoraj belo, kot je opredeljeno v naboru dopolnilnih barv
                text: i18n("hello")
            }
        }
    }
}

Some components such as Labels will automatically inherit by default the color set, some other components have a fixed color set, for instance Buttons are fixed to the Button color set. If it's desired for the button to inherit the parent color set, the inherit property should be explicitly set to 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")
}

Screenshot of a comparison between a button that inherits and one that does not

Uporaba barv po meri

Although it's discouraged to use hardcoded colors, Kirigami offers a more maintainable way to assign a custom hardcoded palette to an item and all its children, that will allow to define such custom colors in one place and one only:

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

Screenshot showing the code above with qmlscene, we can see two rectangles with two different colors