Цвета и темы в Kirigami

Как заставить приложение следовать цветовой схеме пользователя

В Kirigami используется цветовая палитра, следующая системным цветам, чтобы лучше интегрироваться с платформой, на которой выполняется приложение (например, Plasma Desktop, Plasma Mobile, GNOME, Android и т. д.).

Все компоненты QML Kirigami и QtQuick Controls уже должны по умолчанию следовать этой палитре, поэтому обычно этим элементам управления не требуется задавать собственные цвета.

Простые компоненты, такие как Rectangle, всегда следует окрашивать с помощью цветовой палитры, которую предоставляет Kirigami через присоединённое свойство Kirigami.Theme.

Жёстко заданных цветов в QML, таких как #32b2fa или red, обычно следует избегать; если действительно необходимы элементы с собственными цветами, это должна быть область, где используются только собственные цвета (обычно в области содержимого приложения и никогда в служебных областях, таких как панели инструментов или диалоги). Например, жёстко заданный цвет переднего плана black нельзя использовать поверх фона Kirigami.Theme.backgroundColor, поскольку, если в платформе используется тёмная цветовая схема, результат будет плохо контрастировать: чёрный на почти чёрном. Это проблема доступности, и этого следует избегать.

Примечание

Если всё же требуется использовать собственные цвета, воспользуйтесь Kontrast, чтобы убедиться, что выбранные цвета обладают достаточным контрастом и соответствуют рекомендациям WCAG.

Тема

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

Набор цветов

В зависимости от расположения элемента управления следует использовать разные наборы цветов: например, если в представлениях используется цветовая схема Breeze Light, обычный фон почти белый, а в других областях, таких как панели инструментов или диалоги, обычный цвет фона серый.

Если задать для элемента набор цветов, все его дочерние элементы автоматически рекурсивно его наследуют (если только свойство 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
                }
            }
        }
    }
}

Различия наборов цветов в тёмном варианте Breeze

Использование пользовательских цветов

Хотя жёстко заданных цветов рекомендуется избегать, 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
        }
    }
}

Следующие шаги

Типографика