Dear Community,

While we know many of you are pleased with the way our WebUI looks, we also recognize that many of you want to add a custom touch: using your company colors, adding a logo or maybe opting for a dark theme.

Current theming = adding custom, magic stylesheets

If you have ever tried to change, for example, the color of buttons, or add an amazing gradient to your app's background, you will probably find out that these seemingly simple changes can take quite a lot of effort. Custom stylesheets with some pretty long, repetitive and illogical selectors need to be maintained.

Upcoming WebUI Theming = Custom CSS Properties

So, we decided to start working on a better way. More logical, more future-proof, more manageable.

That is why we're introducing a whole range of new CSS variables (officially known as Custom CSS Properties) that will give you access to the properties of the WebUI elements that are most often changed.

CSS variables can be changed on the fly, so your browser's developer tools can give you immediate feedback on the effect of what you're changing. And they'll all be grouped together, using much more logical names than before. Just list your desired values in a single, easy to set up stylesheet file and you're ready to go.

You wanted dark red instead of bright blue buttons? Add this to your project and you're done!

:root {
    --color_bg_button_primary: #7f0000;
    --color_bg_button_primary_hover: #600000;
    --color_bg_button_primary_active: #a00000;
}

There will be 50+ other properties to work with.

We will document all the possibilities with the official release, providing hints and demos. Customer Support will also be able to guide you even better than with the old custom stylesheets.   

How you benefit:

• change the basics by changing just a few colors or other properties.
• set the color/font/property of one logically named item and you'll see it work wherever it should work.
• feeling adventurous: add 'scoping' to your variables and limit where you apply theming.
• feeling really adventurous: combine old custom stylesheets with some new variables and get 'the best of both worlds'. Just because you can and because we're not ending the old ways of working all of a sudden.

What this means for us:

• we are now solely responsible for making your theming work with whatever we add or change to WebUI. New widgets, differently structured widgets: it will now be possible without you seeing any side-effects.
• we can make sure you don't compromise the usability of the developer-interface parts of WebUI.

Expect to see more news about this before the end of Q1'22. A limited trial setup will be part of the next release, but lacking full documentation and support for now.

Keep an eye on the product updates to see how we progress and please reach out to us to share your thoughts.  

Thanks!

Team WebUI