theming questions

Dirk Hohndel dirk at hohndel.org
Wed Dec 23 19:05:56 GMT 2020


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


More information about the Plasma-devel mailing list