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

Робимо так, щоб у програмі використовувалася ваша схема кольорів користувача

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

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

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

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

Тема

Щоб дізнатися більше про клас тем Kirigami, ознайомтеся із документацією щодо програмного інтерфейсу

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

Приклад:

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

Rectangle {
    color: Kirigami.Theme.backgroundColor
}

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

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

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

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

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

Приклад:

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

// У коментарях припускаємо, що у системі використано тему кольорів «Світла Breeze»
...
Rectangle {
    // Буде використано сірий колір, оскільки типовим набором кольорів є Window
    color: Kirigami.Theme.backgroundColor

    Controls.Label {
        // Текст буде майже чорним, як визначено у наборі кольорів Window
        text: i18n("hello")
    }

    Rectangle {
        ...
        // Використовуємо набір для ItemViews
        Kirigami.Theme.colorSet: Kirigami.Theme.View  

        // Не успадковуємо від батьківського об'єкта
        Kirigami.Theme.inherit: false

        // Це буде майже білий колір
        color: Kirigami.Theme.backgroundColor

        Rectangle {
            ...
            // Цей колір також буде майже білим, оскільки colorSet успадковано з батьківського
            // елемента, отже ним буде View
            color: Kirigami.Theme.backgroundColor

            Controls.Label {
                // Текст буде майже чорним, як визначено у наборі кольорів View
                text: i18n("hello")
            }
        }
        Rectangle {
            ...
            // Використовуємо набір Complementary
            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary  

            // Не успадковуємо від батьківського об'єкта
            Kirigami.Theme.inherit: false

            // Цей колір буде майже чорним, оскільки у наборі кольорів Complementary колір тла є
            // темним.
            color: Kirigami.Theme.backgroundColor  

            Controls.Label {
                // Текст буде майже білим, як визначено у наборі кольорів Complementary
                text: i18n("hello")
            }
        }
    }
}

Деякі компоненти, зокрема мітки (Label), типово автоматично успадкують набір кольорів, деякі інші компоненти мають фіксований набір кольорів. Наприклад, із кнопками (Button) пов'язано набір кольорів Button. Якщо бажаним є успадковування кнопкою батьківського набору кольорів, для властивості inherit слід явним чином встановити значення 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")
}

Знімок вікна із порівнянням між кнопкою, яка успадковує властивості, і кнопкою, яка не успадковує властивості

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

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

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

Знімок вікна із кодом, який наведено вище, обробленим у qmlscene, можна бачити два прямокутники із двома різними кольорами