Custom Theme Adjustments

Heya everyone!

I started experimenting with interacting with different modules accessible via the Plugin Interface, and was interested in hearing your opinions on this Theme Manager Proof of Concept:

Since most UI elements reference their color values directly from a Theme variable, overwriting that variable in the Theme singleton lets us dynamically change UI colors (e.g. turning the main interface pink).

I also managed to switch out images/icons by walking down the children of objects accessible accessible by name.

The 2 main benefits I see in a plugin capable of doing this are

  • Accessibility, helping users with vision impairments or color blindness by enabling custom Theme/color combinations that are easier to see
  • Corporate Identity, allowing organizations to align the application’s look with their brand colors and design guidelines

Combined, these two approaches allow users to create a completely customized QField experience.

What do you guys think? Is this worth developing into a robust standalone plugin?
Also, let us know if you’d be interested in supporting this project.

1 Like

@fggs-pascal , nice screenshot :slight_smile: QField already offers color theme customization API for plugins to use: Theme.applyAppearance(…), see QField/src/qml/imports/Theme/Theme.qml at master · opengisch/QField · GitHub .

Here’s a sample plugin that applies a joyful Christmas theme to QField: https://www.dropbox.com/scl/fi/e5ebvzrcqic4031zcg595/christmas-theme-v1.0.zip?rlkey=ipax9nn9906i9obua5lt8o4il&st=rcwi0ekk&dl=1

The plugin also adds some visual image overlays to the welcome screen.

3 Likes

Oh wow, I guess I didn’t scroll far enough. :grinning_face_with_smiling_eyes:
That’s super helpful, thank you!

This allows for much cleaner code!
I’m also planning on allowing users to import/export color setups in the “final” version, so “forcing” light or dark theme comes in pretty handy, too, with QField changing what greys it uses depending on the base theme!

3 Likes

Hi and welcome!

As far as I know, if you want to access and change an element without a name, you have to find a parent element you can access and walk down its children until you find the element you are looking for (in the case of the screenshot, that was the QField logo). Then you can simply set the icon attribute to an image included in your plugin.

That’s fiddly work that requires a lot of trial and error and is not very robust, as changes to the QField UI during updates (from what I’ve seen, QField might get some UI revamps next month) might completely break it. A safer solution would be to overlay images, as Mathieu demonstrated in his response above.

Hope this helps!

1 Like