Many of our current Ubuntu Core Apps have the same interface and color. This is mainly because they use a uniform color palette. In today’s tutorial, we’ll show you how to create a unified UI using the Theme provided by Ubuntu.

\

Let’s go straight to our code:

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Com ponents.themes 0.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "palette.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(60) height: units.gu(85) Page { title: i18n.tr("palette") Palette { id: theme } SystemPalette { id: palette } Column { anchors.fill: parent spacing: units.gu(2) Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.selected.background } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.selected.overlay } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.selected.foreground } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.selected.selection } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.normal.overlay } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.normal.foreground } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.normal.background } Rectangle { width: parent.width height: units.gu(5) color: Theme.palette.normal.selection } Rectangle { width: parent.width height: units.gu(5) color: palette.highlight } Rectangle { width: parent.width height: units.gu(5) color: palette.button } Text { text: "this is good" color: Theme.palette.normal.baseText } } } }Copy the code

From the above code, we do not use our own colors. Instead, we used the colors provided by the system Theme to draw our interface. This way, when the system’s color palette changes, our colors will also change, and we don’t need to make any changes.

\

Run our code:

\

\

\

The code for our project is at: github.com/liu-xiao-gu…