How do I change the font color in the MenuBar?
How can I change the text color of QML menu items MenuBar
?
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3 as QtQuickControlStyle
ApplicationWindow {
title: qsTr("Test")
width: 640
height: 480
visible: true
property color menuBackgroundColor: "#3C3C3C"
property color menuBorderColor: "#282828"
menuBar: MenuBar {
style: QtQuickControlStyle.MenuBarStyle {
padding {
left: 8
right: 8
top: 3
bottom: 3
}
background: Rectangle {
border.color: menuBorderColor
color: menuBackgroundColor
}
// font: // how to set font color to red?
// textColor: "red" /* does not work - results in Cannot assign to non-existent property "textColor" */
TextField { // does also not work
style: TextFieldStyle {
textColor: "red"
}
}
}
}
}
A similar question was asked here , but it doesn't seem to work with menu items.
source to share
You need to override itemDelegate
and itemDelegate.label
for menuStyle
. The former defines the text style MenuBar
, while the latter defines the text style of the menu items.
In the following example, I have defined the full style for MenuBar
and Menu
s, not just their text. scrollIndicator
is the only one missing here. It can be represented as Text
/ Label
or Image
.
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
import QtQuick.Window 2.2
ApplicationWindow {
title: qsTr("Test")
width: 640
height: 480
visible: true
property color menuBackgroundColor: "#3C3C3C"
property color menuBorderColor: "#282828"
menuBar: MenuBar {
Menu {
title: "File"
MenuItem { text: "Open..." }
MenuItem { text: "Close" }
}
Menu {
title: "Edit"
MenuItem { text: "Cut"; checkable: true}
MenuItem { text: "Copy" }
MenuItem { text: "Paste" }
MenuSeparator {visible: true }
Menu {
title: "submenu"
}
}
style: MenuBarStyle {
padding {
left: 8
right: 8
top: 3
bottom: 3
}
background: Rectangle {
id: rect
border.color: menuBorderColor
color: menuBackgroundColor
}
itemDelegate: Rectangle { // the menus
implicitWidth: lab.contentWidth * 1.4 // adjust width the way you prefer it
implicitHeight: lab.contentHeight // adjust height the way you prefer it
color: styleData.selected || styleData.open ? "red" : "transparent"
Label {
id: lab
anchors.horizontalCenter: parent.horizontalCenter
color: styleData.selected || styleData.open ? "white" : "red"
font.wordSpacing: 10
text: styleData.text
}
}
menuStyle: MenuStyle { // the menus items
id: goreStyle
frame: Rectangle {
color: menuBackgroundColor
}
itemDelegate {
background: Rectangle {
color: styleData.selected || styleData.open ? "red" : menuBackgroundColor
radius: styleData.selected ? 3 : 0
}
label: Label {
color: styleData.selected ? "white" : "red"
text: styleData.text
}
submenuIndicator: Text {
text: "\u25ba"
font: goreStyle.font
color: styleData.selected || styleData.open ? "white" : "red"
styleColor: Qt.lighter(color, 4)
}
shortcut: Label {
color: styleData.selected ? "white" : "red"
text: styleData.shortcut
}
checkmarkIndicator: CheckBox { // not strinctly a Checkbox. A Rectangle is fine too
checked: styleData.checked
style: CheckBoxStyle {
indicator: Rectangle {
implicitWidth: goreStyle.font.pixelSize
implicitHeight: implicitWidth
radius: 2
color: control.checked ? "red" : menuBackgroundColor
border.color: control.activeFocus ? menuBackgroundColor : "red"
border.width: 2
Rectangle {
visible: control.checked
color: "red"
border.color: menuBackgroundColor
border.width: 2
radius: 2
anchors.fill: parent
}
}
spacing: 10
}
}
}
// scrollIndicator: // <--- could be an image
separator: Rectangle {
width: parent.width
implicitHeight: 2
color: "white"
}
}
}
}
}
And here is the result MenuBar
and Menu
s:
You can also set menuStyle
directly inside Menu
in the property style
. Something like that:
Menu {
title: "File"
MenuItem { text: "Open..." }
MenuItem { text: "Close" }
style: MenuStyle {
itemDelegate.label: Label {
color: "blue"
text: styleData.text
// stuff above here
}
}
In this last example, only File elements Menu
are styled blue
for text. Arguably how awful it will be.
source to share