Search code examples
cssangularsasskendo-uitelerik

Kendo Theme Customization asper User Theme Selection in Angular 2+

I'm setting up a Kendo grid whose styles must change as per the different templates. Here, I have -all.css file(at nodemodule) which is not compatible with the variables like mat-color function which requires variables.

Expected result : Styles of Kendo Grid are to be changed as per the theme setting. Please explain how to change the .scss variables in node modules by the values from app folder(is it the right way? I'm bit stuck upon this).

Solution

  • After much consultations, and some research- here is the conclusion which is depicted the following steps:

    1. Create the new kendo.scss file in the app folder.

    2. Separate the Kendo theming (all.css) from the nodemodule folder to the new style sheet file in app folder by changing the angular.json file string calling the kendo styling(replace all.css to kendo.scss for all input links).

     "styles": [
              { //"input": "nodemodule/@progress/kendo-theming/all.css" to below
                "input": "src/app/theme/styles/_kendo.scss"
              },
    1. For theming use the variables given in the below link for Customization https://www.telerik.com/kendo-angular-ui/components/styling/theme-default/customization/

    By this, got what I need. If any bugs arises then stick to point 3 (which arises due to difference in the variable provided).

    1. For Theme Reseting for bootstrap, angular material we need to use Kendo ThemBuilder -> https://themebuilder.telerik.com/kendo-angular-ui