2018.3.911 Material Theme Customisation

2 posts, 0 answers
  1. Mike
    Mike avatar
    1 posts
    Member since:
    Jan 2018

    Posted 28 Sep 2018 Link to this post


    I have a project with the latest version of Kendo UI ASP.NET MVC.


    In my bundle config i am loading the 2 .css files




    Everything runsand looks as expected with the blue material theme. I want to be able to override the accent/primary color in the theme.

    I've tried downloading and using the npm package @progress/kendo-theme-material, overriding the scss variables and recompiling the .css.

    when i add this file into the bundle config it completely messes up the controls, padding, margin, spacing and the actual look of the controls is wrong.


    How do i customise the material theme?  






  2. Preslav
    Preslav avatar
    568 posts

    Posted 01 Oct 2018 Link to this post

    Hello Mike,

    The "kendo.common-material.min.css" and "kendo.material.min.css" are the files of our "Bootstrap v3" Less-based theme. On the other hand, the "@progress/kendo-theme-material" package contains the files of our "Bootstrap v4" Sass-based theme:
    More information about these themes is available here:

    Based on your post, I believe that you would like to use the "Bootstrap v4" theme. Thus, remove the "common" file.

    Finally, you might be interested in checking our ThemeBuilder:

    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top