Change fusion style colors in QML dynamically - qt

Question

I'm developing QML application using Fusion style. I'm using Qt 5.15 lts.
I want to make a function which switch color themes(light mode, dark mode, etc.) in runtime.
The documentation says that changing the color system of fusion style can be done by modifying palette object in QML.
I believe it will be easily done in ApplicationWindow type, but I have to use my custom Window object, rather than ApplicationWindow.
So I tried to it in C++, like below.
// #theme_dark_ and #theme_light_ are pre-defined palette object.
Q_INVOKABLE void Backend::SetDarkMode(const bool flag) {
qGuiApp->setPalette(flag ? theme_dark_ : theme_light_);
}
I checked setPalette method works before starting QML application(QGuiApplication::exec), but it didn't when QML app is running.
Is there any way to modify palette in Window type in QML, or calling QCoreApplication::setPalette in QML app runtime?
Thanks.

Answer 1

In the following example, I have a Page component where I can set the palette which will be inherited by all its children:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
palette: darkMode.checked ? darkTheme : lightTheme
Flickable {
id: flickable
anchors.fill: parent
contentWidth: columnLayout.width
contentHeight: columnLayout.height
clip: true
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
ColumnLayout {
id: columnLayout
width: flickable.width - 40
CheckBox {
id: darkMode
text: checked ? qsTr("Dark Mode") : qsTr("Light Mode")
checked: false
}
Label {
text: qsTr("Sample Label")
}
CheckBox {
text: qsTr("Sample CheckBox")
}
RadioButton {
text: qsTr("Sample Radio Button")
}
Button {
text: qsTr("Sample Button")
}
ComboBox {
Layout.preferredWidth: 200
model: [ "ComboValue 1", "ComboValue 2", "ComboValue 3" ]
}
Slider {
from: 0
to: 100
}
ListView {
model: 20
Layout.preferredHeight: contentHeight
delegate: ItemDelegate {
text: "ListItem " + (index + 1)
onClicked: ListView.view.currentIndex = index
}
}
}
}
Palette {
id: darkTheme
alternateBase: "#000"
base: "#000"
button: "#111"
buttonText: "#fff"
dark: "#666"
highlight: "#d73"
highlightedText: "#000"
light: "#000"
mid: "#444"
midlight: "#333"
placeholderText: "#80000000"
shadow: "#888"
text: "#fff"
window: "#222"
windowText: "#fff"
}
Palette {
id: lightTheme
alternateBase: "#fff"
base: "#fff"
button: "#eee"
buttonText: "#000"
dark: "#999"
highlight: "#38c"
highlightedText: "#fff"
light: "#fff"
mid: "#bbb"
midlight: "#ccc"
placeholderText: "#80000000"
shadow: "#777"
text: "#000"
window: "#eee"
windowText: "#000"
}
}
You can Try it Online!