Search code examples
qtqmlqt-quickqt6

Qt styling Material.accent (a button) brigther than expected

Using the Qt Quick Application as a template. I'm following this documentation about styling https://doc.qt.io/qt-6/qtquickcontrols2-material.html. Here is the code:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Window


ApplicationWindow {
    id: window
    width: 1024
    height: 720
    visible: true
    title: qsTr("My Test")

    Material.theme: Material.Dark
    Material.primary: Material.Blue
    Material.accent: Material.Blue

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                font.pixelSize: 20
                text: qsTr("‹")
                onClicked: stack.pop()
            }
            Label {
                font.pixelSize: 20
                text: "My app"
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            ToolButton {
                font.pixelSize: 20
                text: qsTr("⋮")
                onClicked: menu.open()
            }
        }
    }


    Button{
        text: qsTr("????")
        highlighted: true
    }
}

And I'm obtaining this output: output My question is why the button is brigther than the header content? Am I not using the same material? I'm using qt 6.2.2. SO: Linux mint

Solution

  • As @Amfasis suggested, using:

    Material.accent: Material.color(Material.Blue)

    will make it work properly.