Material.accent color by name, only accepts enumerations?

MEMekaniske

I'm trying to use some other colors in my controls to match the rest of the app, but I can only get the predefined materials to work on Material.accent?

The docs says,

Pre-defined Material Colors
Even though primary and accent can be any color, it is recommended to use one of the pre-defined colors 
that have been designed to work well with the rest of the Material style palette:

So i guess I should be able to use,

Material.accent:"darkolivegreen"

or simlar? But says Invalid property assignment: int expected

Is the docs old or am I trying to use the color wrong?

jsulm

@MEMekaniske See https://doc.qt.io/qt-5/qtquickcontrols2-material.html#material-accent-attached-prop
color is not a string: https://doc.qt.io/qt-5/qtquickcontrols2-material.html#pre-defined-material-colors

MEMekaniske

@jsulm hey. yeah I undersood that, but as the top of that page you sent, says It can be any color or a predefined, it is saying two things..

I think it is wierd.. Using Material.accent: in the app window to change all styles requires

Material.accent:Material.PredefinedColor

while in a control, this worked

 Material.accent: "mycolor"

sort of useless to have to create a new control for each with that color property though

lemons

@MEMekaniske you can simply create the qtquickcontrols2.conf file:

# qmlroot/qtquickcontrols2.conf
[Controls]
Style=Material

[Material]
# predefined material color
Primary=DeepPurple
# hex color
Foreground=#444444
# color by name
Accent=darkolivegreen

Background=Grey
Theme=System

Button {
    text: "Button"
    /* uses color "darkolivegreen" from qtquickcontrols2.conf file */
    Material.background: Material.accent
}

If you want to have many customizations, you could also create a singleton for all of your design values:

// AppStyles.qml
pragma Singleton

import QtQuick 2.15

Item {
    // I prefer prefixing the main purpose for faster auto-complete navigation

    property color colorButton: "darkolivegreen"

    property int pointSize: 12
    property int pointSizeLG: 16

    property int radiusDefault: 10

    property int spacingListDefault: 10
}

create a file called qmldir (without extension) and add the following line:

singleton AppStyles 1.0 AppStyles.qml

// usage
Column {
    anchors.centerIn: parent
    spacing: AppStyles.spacingListDefault
    Text {
        text: qsTr("Normal")
        font.pointSize: AppStyles.pointSize
    }
    Text {
        text: qsTr("Large")
        font.pointSize: AppStyles.pointSizeLG
    }
    Button {
        text: "Button"
        Material.background: AppStyles.colorButton
    }
}

MEMekaniske

@lemons Sorry for a late reply, I will try this tomorrow, thank you!