Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 655
singpolyma Avatar asked Aug 26 '17 12:08

singpolyma


Video Answer


1 Answers

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)

like image 93
Jean-Michaël Celerier Avatar answered Sep 28 '22 03:09

Jean-Michaël Celerier