Standard colors in QtCreator (KDE)

Rouleaux

I have just got started trying QtCreator today, on Arch Linux with KDE (BreezeDark theme).

Below this, there is a picture of the standard "Hello World" application in Qt with QML (QtQuick). I can't find out why the text in the button is white, as I haven't changed a single thing apart from adding the button..

To be clear, there is text in the button, it's just not visible due to the color.

Image

? Offline

@Rouleaux Hi, welcome to the Qt forum! The problem here is that the text color of the system palette is used but the background of the button is only a grey image and thus does not change with respect to the system palette. That's a bug in the Button component. You can work around that by providing a custom style to the Button that works as intended (using SystemPalette component). Or better port your application from Qt Quick Controls 1 to Qt Quick Controls 2.

Rouleaux

@Wieland Thank you for your very fast reply! I do think though, that I am already using Qt Quick 2. Is there a way I can check that?

? Offline

This might be a bit confusing: You are most certainly already using Qt Quick 2. But the buttons and all the other controls are part of an additional module named "Qt Quick Controls". And there are now two versions of the latter: Qt Quick Controls 1 and Qt Quick Controls 2. You can use either version together with Qt Quick 2 but Qt Quick Controls 2 is (obviously) newer and better.

? Offline

In your QML file you specify which modules you want to use, e.g.:

import QtQuick 2.7
import QtQuick.Controls 2.0

Rouleaux

Oh you are absolutely right. I see that I am using QtQuick.Controls 1.5

I will try changing that to 2.0, see if that works. Thank you so much so far!

EDIT: It seems that my system does not have 2.0 installed module "QtQuick.Controls" version 2.0 is not installed

? Offline

Qt Quick Controls 2 was introduced with Qt 5.7.

Rouleaux

I have made a new project with Qt 5.7, but it seems that I have just version 1.5 installed? I can't import 2.0 either on Qt 5.7

EDIT: I didn't realise that Qt Quick Controls was available for download via the Arch Repos. Thank you so much for solving this problem!

Rouleaux

@Wieland
If I may hijack my own thread, is there a way to apply the SystemPalette application-wide? The way I use it now, it only applies to one element of my application.

Window { SystemPalette { id: palette; colorGroup: SystemPalette.Active } color: palette.window visible: true width: 640 height: 480 title: qsTr("Hello World")

? Offline

Don't know how to do it from within a QML file but you can do it from C++:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QPalette>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QPalette systemPalette = QGuiApplication::palette();
    systemPalette.setColor(QPalette::Active, QPalette::Button, QColor("orange"));
    QGuiApplication::setPalette(systemPalette);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}

Rouleaux

That code doesn't seem to change anything visually. Am I doing something wrong?

? Offline

It changes the system palette application wide, so the following will give you an orange rectangle:

    Rectangle {
        SystemPalette { id: systemPalette }
        anchors.fill: parent
        color: systemPalette.button
    }

Rouleaux

I'm not sure we are discussing the same thing haha. I'd like for my Qt Application to fetch the systempalette of the OS, and apply that to my application.

Vicky Sharma

@Rouleaux
I think there are some misunderstanding, it will be better if you post your code here so would be able to get that point on which this thread start and try to resolve too soon.

? Offline

@Rouleaux Oh, I think I misunderstood your intentions completely. So your actually want all your controls to look natively?

Rouleaux

@Vicky-Sharma Yes, sorry, that might clear things up.

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        id: button1
        x: 8
        y: 8
        text: qsTr("Nicotine Base")
    }
}

This is my QML. I'd like to know wether there is an option to provide the systemtheme (mine for example is BreezeDark), but then applicationwide. Now I have to apply SystemPalette to every single element, but I suppose there must be an easier way right?

? Offline

Ok, so for natively looking widgets you'll need

QT += widgets in your *.pro file
QApplication in main.cpp (not QGuiApplication)
QtQuick.Controls 1 (not 2)

E.g.:

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQmlApplicationEngine engine(QUrl(QLatin1String("qrc:/main.qml")));
    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        text: "Exit"
        anchors.centerIn: parent
        onClicked: Qt.quit()
    }
}

Rouleaux

@Wieland Shoot, I've just started using QtQuick.Controls 2.0..

Vicky Sharma

@Rouleaux
unfortunately i don't have 5.7 but i checked on 5.6 and rewrite few thing, you may check too as well as "Wieland" is also post write one check and revert if any error.
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

Button {
    id: button1
    x: 8
    y: 8
    text: qsTr("Nicotine Base")
}

}

? Offline

@Rouleaux I thought you were only complaining about the white button text, because, yes, it actually shouldn't use the system palette at all, unless you add support for native widgets as described above. sry! =)