Last Updated: 27 Sep 2021 08:15 by ADMIN
Kris Nobels
Created on: 05 Feb 2021 10:45
Category: ThemeBuilder
Type: Feature Request
ThemeBuilder: Control the border-color from the list of parameters
I would like to control the border-color from the list of parameters. 
1 comment
Ivan Zhekov
Posted on: 27 Sep 2021 08:15

With 2021 R3 we now store all theme information in json format, which is included in the themes. That format allows us to infinitely customize the themes, by supplying fields where relevant.

What I am saying that now it is possible to have that with little to no effort.

However ...

We store most of our colors in rgba format, which we do not support yet in our themebuilder...

That's not to say one cannot customize a border color. Quite the contrary! Examine https://github.com/telerik/kendo-themes/blob/develop/packages/default/lib/swatches/default-main.json.

Say you are working with default or bootstrap theme and you would like to be able to customize the border color of a button. Doing a quick search for button will lead you to aptly names group in the json. If you save the file (as json) and change the entire button group to:

    "name": "Button",
    "variables": {
        "button-text": {
            "name": "Button text color",
            "type": "color",
            "value": "#424242"
        "button-bg": {
            "name": "Button background",
            "type": "color",
            "value": "#f5f5f5"
        "button-border": {
            "name": "Button border",
            "type": "color",
            "value": "#cccccc"

and then import that file in themebuilder, you will now have a "Button border" field.

Let me go trough what we've done is to add an extra field, called "button-border" and added some details object: name sub filed, type sub field, value sub field.

Where you place the extra field result in where it will be visible in themebuilder. In this case, the field is grouped with the rest of button styles (because presumably, that's what you want to customize).

Then the field name "button-border" will result in a sass variable "$button-border". That variable will be of type color and when displayed in themebuilder it will have a label of "Button border". The default value (one used upon initial load of the theme) will be "#cccccc", which is sort of medium gray.

Using that, one can extend the themebuilder interface a lot!

As soon as we have support for rgba colors, we'll have the themebuilder customizing border colors, as well! In the meantime, you can use the approach describled above.

Ivan Zhekov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.