singpolyma
singpolyma

Reputation: 11251

How do I create a custom QML Control that respects the Material Style colors?

I am creating a custom Control in QML for my application. I want to run on both desktop and Android, so I'm using Material Style for the application. This applies a colour scheme to all existing Qt Quick Controls 2 controls (buttons, toolbars, etc). But how do I use those colours on my control? I know I can just use the same colours with a hex code or whatever, but I want my control's colours to change if I change the accent colour in the theme, etc.

I've tried SystemPalette but the colours there don't seem to follow Material Style but rather always follow the default style.

Is it possible for me to get access to the Material colours? What will happen if the application is run in non-Material mode?

Upvotes: 5

Views: 3531

Answers (3)

singpolyma
singpolyma

Reputation: 11251

Just figured it out. Set an id on any actual control, then you can access the "extra" colours as controlId.Material.buttonColor etc

Upvotes: 4

dtech
dtech

Reputation: 49319

Remember that you can also set style colors. And it is not that much of a complex theme either, there are 3-4 colors per style.

So you can define your own set of colors in a singleton, set whatever style you are using to those colors, and use those same colors in your custom stuff. This way you will achieve uniformity between stuff that is styled by default and your elements, and color changes will affect everything, regardless of which style you are using.

Upvotes: 1

You can import the styles :

import QtQuick.Controls.Material 2.2

or

import QtQuick.Controls.Universal 2.2

The colors are then available through a singleton:

console.log(Material.accent)
console.log(Material.primary)
// etc...

The current style can be retrieved from C++ with QQuickStyle (you need to link against the Qt5QuickControls2 library)

Upvotes: 6

Related Questions