theming questions

[Nicolas Fella]

On 23.12.20 20:05, Dirk Hohndel wrote:
> Hi there and happy holidays
>
> I'm trying to improve the theming of my Kirigami-based app. We started using Kirigami about 5 years ago (before the current Theme code was there) and have done a lot of rather brute force things along the way (mostly out of incompetence and impatience, TBH).
> Additionally, while Kirigami appears to think of theming mostly as "let's fit into whatever desktop theme is used", we want to offer the user the ability to switch between different color schemes at run time (and then of course remember their choice).
> As a result we have our own "ThemeInterface" object that we instantiate from QML and use to grab the theme colors. Of course that clashes with the way Kirigami does theming. We have a few hacks to the Kirigami code (hooray for open source libraries), but I'm trying to move away from those and find ways to utilize the existing Kirigami theming more.
> And that's where I'm running into what I guess are understanding issues with the code.
>
> Here's how I think Kirigami theming works.
> There's an attached property that shows up on every QML object. The Theme property offers background, text, highlight colors, and interestingly a colorSet that allows for different color combination for Windows, Buttons, modal things, etc.
> All great and logical (I think).
>
> Now let's assume you want to change those colors. The documentation advises against that, but also shows how to do that.
>
> This is a code snippet from our main.qml:
>
>          // we want to use our own colors for Kirigami, so let's define our colorset
>          Kirigami.Theme.inherit: false
>          Kirigami.Theme.colorSet: Kirigami.Theme.Button
>          Kirigami.Theme.backgroundColor: subsurfaceTheme.backgroundColor
>          Kirigami.Theme.textColor: subsurfaceTheme.textColor
>
> First you apparently need to (unintuitively?) set inherit to false so that our colors get used. That seems backwards, but it appears to work.
> But now comes the hard part. Here I'm trying to get the ActionButton to use our theme colors. And the above works. And because of the bindings, if the subsurfaceTheme changes, the ActionButton color changes as well.
>
> Next I want to theme the global/context drawer including its handles.
> I've tried a few things adding similar blocks to the above to my Kirigami.ContextDrawer instantiations, but I can't seem to get this to work.
> First, which colorSet should they be using... reading the code I think it's View, but I'm not sure. But even if I add something like
>
> 	contextDrawer: Kirigami.ContextDrawer {
> 		id: contextDrawer
> 		closePolicy: QtQuickTemplates.Popup.CloseOnPressOutside
> 		// we want to use our own colors for Kirigami, so let's define our colorset
> 		Kirigami.Theme.inherit: true
> 		Kirigami.Theme.colorSet: Kirigami.ThemeView
> 		Kirigami.Theme.backgroundColor: subsurfaceTheme.backgroundColor
> 		Kirigami.Theme.textColor: subsurfaceTheme.textColor
>
> I still get white-ish drawers and dark gray on very light gray open/close handles for those drawers - regardless of the colors set in my subsurfaceTheme object.
>
> So, I guess, my question is... is there a more detailed example somewhere that illustrates how I can manually change the colors of all (most?) of the visual aspects of a Kirigami app without patching Kirigami?
>
> Thanks
>
> /D

Hi Dirk,

The Kirigami.Theme that we have in QML is backed by the PlatformTheme
class
(https://invent.kde.org/frameworks/kirigami/-/blob/master/src/libkirigami/platformtheme.cpp).
It contains a plugin system that is responsible for loading the actual
colors
(https://invent.kde.org/frameworks/kirigami/-/blob/master/src/libkirigami/platformtheme.cpp#L916)
and a fallback implementation
(https://invent.kde.org/frameworks/kirigami/-/blob/master/src/libkirigami/basictheme.cpp).
The plugin is selected based on the QQC2 style, for example the
implementation for qqc2-desktop style can be found at
https://invent.kde.org/frameworks/qqc2-desktop-style/-/blob/master/kirigami-plasmadesktop-integration/plasmadesktoptheme.cpp.
My suggestion would be to create your own color plugin and ship that
with your app. That would allow you to define the various
Kirigami.Theme.* values based on your own logic while not requiring any
special QML code. What QQC2 style do you use in your app? If you have
your own anyway then it would be a matter of having a plugin with the
right name in the plugin path and it would be selected. If not then we
can talk about adding some API that allows selecting a specific color
plugin.

Cheers and happy holidays

Nico