[Interest] Creating a custom QML style with Material as a fallback, but with a dark theme
EXT Mitch Curtis
mitch.curtis at qt.io
Thu Sep 21 07:06:23 CEST 2023
I've created https://bugreports.qt.io/browse/QTBUG-117403 to track this.
> -----Original Message-----
> From: Interest <interest-bounces at qt-project.org> On Behalf Of EXT Mitch
> Curtis via Interest
> Sent: Wednesday, September 20, 2023 1:07 PM
> To: Matthew Fincham <matthewf at cat.co.za>; interest at qt-project.org
> Subject: Re: [Interest] Creating a custom QML style with Material as a fallback,
> but with a dark theme
>
> > -----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.q/
> t.io%2Fqt-6%2Fqtquickcontrols-styles.html%23compile-time-style-
> selection&data=05%7C01%7Cmitch.curtis%40qt.io%7C34ab2473452f40b30
> f4708dbb997cdeb%7C20d0b167794d448a9d01aaeccc1124ac%7C0%7C0%
> 7C638307833867354198%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wL
> jAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C
> %7C%7C&sdata=6HlXwYQBbXAoy1bj4Z5bYU8TCf1MifRv9%2BuO0%2Flmrr8
> %3D&reserved=0
>
> > 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-st
> > >>> yl
> > >>> 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://l/
> > >>
> is%2F&data=05%7C01%7Cmitch.curtis%40qt.io%7C34ab2473452f40b30f4
> 708d
> > >>
> bb997cdeb%7C20d0b167794d448a9d01aaeccc1124ac%7C0%7C0%7C6383
> 07833867
> > >>
> 354198%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoi
> V2luMzIi
> > >>
> LCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=hTr8401I
> kTxlOv
> > >> RcB1WzDAfhsWAOKqA%2FzFR7z1lqtkU%3D&reserved=0
> > >>
> >
> 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
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> https://lists.q/
> t-
> project.org%2Flistinfo%2Finterest&data=05%7C01%7Cmitch.curtis%40qt.io
> %7C34ab2473452f40b30f4708dbb997cdeb%7C20d0b167794d448a9d01a
> aeccc1124ac%7C0%7C0%7C638307833867354198%7CUnknown%7CTWFp
> bGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXV
> CI6Mn0%3D%7C3000%7C%7C%7C&sdata=I3CQxI4tfKGGfXiDFUcptsLG%2B4
> k%2BPxjEJyP87b0O774%3D&reserved=0
More information about the Interest
mailing list