Кольори і теми у Kirigami

У Kirigami передбачено палітру кольорів, яка відповідає загальносистемним кольорам для кращої інтеграції із платформою, на якій запущено програму (тобто стільницею Плазми, Плазмою для мобільних пристроїв, GNOME, Android тощо).

Усі компоненти QML Kirigami і усі елементи керування QtQuick вже типово використовують цю палітру, тому, зазвичай, немає потреби у додатковому налаштовуванні розфарбування усіх цих елементів керування.

Примітивні компоненти, зокрема Rectangle, завжди має бути розфарбовано з використанням палітри кольорів, яка надається Kirigami за допомогою долученої властивості Kirigami.Theme.

У коді QML, зазвичай, слід уникати жорстко прописаних кольорів, зокрема #32b2fa або red. Якщо у елементах із нетиповими кольорами справді є потреба, це має бути область, де використовуються лише нетипові кольори (зазвичай, область показу даних програми, — ніколи не обрамлення, зокрема панелі інструментів або діалогові вікна). Наприклад, не можна використовувати жорстко прописаний колір переднього плану black над кольором тла Kirigami.Theme.backgroundColor, оскільки якщо у платформі використано темну схему кольорів, результат матиме погану контрастність із чорним кольором над майже чорним кольором. Слід уникати цієї проблеми із доступністю.

Тема

Kirigami.Theme є долученою властивістю, тому нею можна користуватися у будь-якому записі QML. Вона містить як властивості усі доступні кольори палітри і дані щодо палітри, яку має бути використано зокрема у властивості colorSet.

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 наведено зразок коду із прикладами усіх кольорів, які доступні для Kirigami через Kirigami.Theme. До цього прикладу включено усі стани кольорів: якщо ви клацнете поза вікном, кольори буде переведено у неактивний стан, а якщо ви перемкнете вашу систему на темну тему кольорів, буде показано темні варіанти кольорів у режимі реального часу.

Встановлення кольору

Залежно від місця розташування елемента керування, він використовуватиме різні набори кольорів. Наприклад, (якщо використано світлу схему кольорів Breeze) на панелях панелях перегляду звичайне тло майже біле, а в інших областях, зокрема на панелях інструментів, звичайне тло є сірим.

Якщо ви визначаєте набір кольорів для запису, усі його дочірні записи (рекурсивно) успадкують його автоматично (якщо для властивості inherit не буде явним чином встановлено значення false, що завжди слід робити, коли розробник хоче примусово встановити певний набір кольорів), тому дуже просто змінити кольори для усієї ієрархії записів без безпосередньої зміни кольорів для кожного із записів цієї ієрархії.

У Kirigami.Theme передбачено підтримку 5 різних наборів кольорів:

• View: набір кольорів для панелей записів, зазвичай, найсвітліший з усіх (у світлих темах кольорів)
• Window: набір кольорів для вікон і «хромованих» областей (це також типовий набір кольорів)
• Button: набір кольорів, який використовують для кнопок
• Selection: набір кольорів, який використовують для позначених областей
• Tooltip: набір кольорів, який використовують для підказок
• Complementary: набір кольорів, який має доповнювати Window: зазвичай, є темним навіть у світлих темах. Ним можна скористатися для «акцентування» невеликих частин інтерфейсу програми.

Тут наведено приклад, у якому продемонстровано те, як успадковуються набори кольорів та як ними можна скористатися для виокремлення різних компонентів. Для додавання контрастності кольорам було використано широку рамку.

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

// The comments assume the system uses the Breeze color theme

Kirigami.ApplicationWindow {
    height: 500
    width: 800

    Rectangle {
        anchors.fill: parent
        border.width: 5

        // A gray color will be used, as the default color set is Window
        color: Kirigami.Theme.backgroundColor

        Controls.Label {
            // The text will be near-black, as defined in the Window color set for light themes
            text: "Rectangle that uses default background color\nfrom the Window color set"
            padding: 100
        }
        Rectangle {
            anchors.bottom: parent.bottom
            border.width: 5
            width: parent.width
            height: Math.round(parent.height / 2)

            // Use the color set used for Views
            Kirigami.Theme.colorSet: Kirigami.Theme.View
            // Do not inherit from the parent
            Kirigami.Theme.inherit: false
            // This will be a near-white color in light themes
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                text: "Rectangle that does not inherit the default background color\nand uses the Theme.View color set"
                padding: 50

            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                border.width: 5
                width: Math.round(parent.width / 2)
                height: Math.round(parent.height / 2)

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

                Controls.Label {
                    // The text will be near-black, as defined in the View color set for light themes
                    text: "Rectangle that inherits the Theme.View color set"
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                border.width: 5
                width: Math.round(parent.width / 2)
                height: Math.round(parent.height / 2)

                // Use the Complementary set
                Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
                // Do not inherit from the parent
                Kirigami.Theme.inherit: false
                // This will be near-black as the background color
                // of the Complementary color set is dark in light themes
                color: Kirigami.Theme.backgroundColor

                Controls.Label {
                    // The text will be near-white, as defined in the Complementary color set for light themes
                    text: "Rectangle that does not inherit the Theme.View\nand uses Theme.Complementary instead"
                    anchors.centerIn: parent
                }
            }
        }
    }
}

Використання нетипових кольорів

Хоча не рекомендовано використовувати жорстко прописані кольори, у Kirigami передбачено зручніший у сенсі супроводу спосіб призначення нетипової жорстко прописаної палітри для запису і усіх його дочірніх записів. Цей спосіб надає змогу визначити такі нетипові кольори одноразово і у єдиному місці коду:

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
        // ЗАУВАЖЕННЯ: незалежно від використаного набору кольорів, рекомендуємо замінити усі
        // доступні кольори у Theme, щоб уникнути помилок із контрастністю кольорів

        Kirigami.Theme.colorSet: Kirigami.Theme.Window
        Kirigami.Theme.backgroundColor: "#b9d795"
        Kirigami.Theme.textColor: "#465c2b"
        Kirigami.Theme.highlightColor: "#89e51c"
        // Перевизначення усіх інших потрібних кольорів

        // Це буде "#b9d795"
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            // Це буде "#465c2b"
            anchors.centerIn: parent
            height: Math.round(parent.height / 2)
            width: Math.round(parent.width / 2)
            color: Kirigami.Theme.textColor
        }
    }
}