[Interest] Creating a custom QML style with Material as a fallback, but with a dark theme
EXT Mitch Curtis
mitch.curtis at qt.io
Wed Sep 20 07:06:32 CEST 2023
> -----Original Message-----
> From: Matthew Fincham <matthewf at cat.co.za>
> Sent: Wednesday, September 20, 2023 12:43 PM
> To: EXT Mitch Curtis <mitch.curtis at qt.io>; interest at qt-project.org
> Subject: Re: [Interest] Creating a custom QML style with Material as a fallback,
> but with a dark theme
>
> Hi Mitch
>
> Thanks for the reply. That is effectively what I have resorted to doing:
> setting the attached properties for the root window item:
>
> Material.theme: Material.Dark
> Material.primary: ...
> Material.accent: ...
> Material.foreground: ...
> Material.background: ...
>
> One problem with this approach is the 'Variant' property can't be set
> (Dense/Normal). Looking in the source code, that can only be set from the
> environment variable, which is done in
> QQuickMaterialStyle::initGlobals()
Yes, that's correct.
> Just to complete the picture, I have tried with the import in qmldir:
>
> import QtQuick.Controls.Material auto
>
> and setting the fallback style in C++:
>
> QQuickStyle::setFallbackStyle("Material");
>
> I would imagine 'initiGlobals' should be called, even when it is the fallback
> style. But I don't know the infrastructure for the style plugins and the theme
> initialisation, so not sure how that should be accomplished.
Just to correct myself from earlier: I had a typo in my environment variable name, so the attached property isn't needed if you:
- Import the fallback style yourself (via qmldir or CMake).
- Import your style explicitly [1] instead of QtQuick.Controls.
I suspect you're missing the second step above.
To be thorough about this (since I already have the code here), this means that doing the following in C++
qputenv("QT_QUICK_CONTROLS_STYLE", "ResourceStyle");
qputenv("QT_QUICK_CONTROLS_FALLBACK_STYLE", "Material");
qputenv("QT_QUICK_CONTROLS_MATERIAL_THEME", "Dark");
with this qmldir
module ResourceStyle
Button 2.15 Button.qml
and this QML code
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
RowLayout {
Button {
text: "Button"
}
TextArea {
placeholderText: "Enter text..."
}
}
}
is not enough for the Material dark theme to be taken into use.
At the very least we need to document that setFallbackStyle won't actually import any styles. We also need to check if this is a regression against Qt 5, and if so, whether or not it's possible to fix. I'll let you know if I discover anything else.
[1] https://doc.qt.io/qt-6/qtquickcontrols-styles.html#compile-time-style-selection
> Kind regards
> Matthew
>
> On 2023/09/20 03:44, EXT Mitch Curtis wrote:
> > Hi Matthew,
> >
> >> -----Original Message-----
> >> From: Interest <interest-bounces at qt-project.org> On Behalf Of Matthew
> >> Fincham via Interest
> >> Sent: Tuesday, September 19, 2023 1:13 PM
> >> To: interest at qt-project.org
> >> Subject: Re: [Interest] Creating a custom QML style with Material as
> >> a fallback, but with a dark theme
> >>
> >> Hi
> >>
> >> Following up on my own post.
> >>
> >> QQuickMaterialStyle logs a warning if an invalid theme is used (not
> >> 'Light' or 'Dark'). This is in the function that initialises the
> >> style's global variables. (in
> >> qquickmaterialstyle.cpp)
> >>
> >> When the 'Material' style is used as the fallback style, this log is
> >> not seen. This initialisation function is called from the 'Material'
> >> plugin ( qtquickcontrols2materialstyleplugin.cpp), which seems to
> >> indicate the plugin's initialisation is not run when it is the fallback theme.
> >>
> >> Does this make sense, and is there a way to force the initialisation?
> > I'm looking into it, but as a workaround, assuming your style imports the
> Material style as a fallback in its qmldir (or IMPORTS in qt_add_qml_module):
> >
> > import QtQuick.Controls.Material auto
> >
> > you can then use the attached API to set the theme:
> >
> > Material.theme: Material.Dark
> >
> >> Thanks again.
> >> Matthew Fincham
> >>
> >> On 2023/09/18 12:52, Matthew Fincham via Interest wrote:
> >>> Hi
> >>>
> >>> I am attempting to create a custom QML style using this documentation:
> >>>
> >> https://doc/.
> >>> qt.io%2Fqt-6%2Fqtquickcontrols-customize.html%23definition-of-a-styl
> >>> e&
> >>>
> >>
> data=05%7C01%7Cmitch.curtis%40qt.io%7C4e7b0a9253b649740eed08dbb
> >> 8cf6fb0
> >>
> %7C20d0b167794d448a9d01aaeccc1124ac%7C0%7C0%7C638306973314
> >> 152407%7CUnk
> >>
> nown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6I
> >> k1haWw
> >>
> iLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=V2b3M0MBvsarYVwtDQd
> >> aF3kwWtc2xurp
> >>> AuA%2F10IABak%3D&reserved=0
> >>>
> >>> I won't provide sample code because it is close to line-for-line.
> >>> The custom style works - there is a custom button and the other
> >>> controls use the Material style. However, I can't get the Material
> >>> style to run with the Dark theme.
> >>>
> >>> The theme is set with an environment variable:
> >>>
> >>> QT_QUICK_CONTROLS_MATERIAL_THEME=Dark
> >>>
> >>> The style is set in C++:
> >>>
> >>> QQuickStyle::setStyle("MyStyle");
> >>>
> >>> If the style is "Material" this works as expected. With 'MyStyle',
> >>> that falls back to Material, a Light theme is used. Is there any was
> >>> to force the fallback style to use the Dark theme?
> >>>
> >>> Many thanks
> >>> Matthew Fincham
> >>> _______________________________________________
> >>> Interest mailing list
> >>> Interest at qt-project.org
> >>> https://list/
> >>> s.qt-
> >> project.org%2Flistinfo%2Finterest&data=05%7C01%7Cmitch.curtis%40q
> >>
> t.io%7C4e7b0a9253b649740eed08dbb8cf6fb0%7C20d0b167794d448a9d0
> >> 1aaeccc11
> >>
> 24ac%7C0%7C0%7C638306973314152407%7CUnknown%7CTWFpbGZsb3
> >> d8eyJWIjoiMC4w
> >>
> LjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
> >> C%7C%7C
> >>
> &sdata=%2F9LFtD8jWWX0qNZxQOv0ENQP3JuVbDEOgHDpIZ0R%2FoE%3D&
> >> reserved=0
> >>
> >> _______________________________________________
> >> Interest mailing list
> >> Interest at qt-project.org
> >> https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Flis
> >>
> ts.q%2F&data=05%7C01%7Cmitch.curtis%40qt.io%7C38011a85df6c4af294
> 0f08d
> >>
> bb99403f8%7C20d0b167794d448a9d01aaeccc1124ac%7C0%7C0%7C6383
> 0781761575
> >>
> 2498%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2l
> uMzIiLCJB
> >>
> TiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=K%2FDfjfA%2
> FEP0Nx0YI
> >> CcfeyD%2FWHcTu4OKNd852h6IDufo%3D&reserved=0
> >> t-
> >>
> project.org%2Flistinfo%2Finterest&data=05%7C01%7Cmitch.curtis%40qt.io
> >>
> %7C4e7b0a9253b649740eed08dbb8cf6fb0%7C20d0b167794d448a9d01aa
> >>
> eccc1124ac%7C0%7C0%7C638306973314152407%7CUnknown%7CTWFpb
> >>
> GZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI
> >>
> 6Mn0%3D%7C3000%7C%7C%7C&sdata=%2F9LFtD8jWWX0qNZxQOv0ENQ
> >> P3JuVbDEOgHDpIZ0R%2FoE%3D&reserved=0
More information about the Interest
mailing list