Dark and Light theme using sass

3 posts, 0 answers
  1. Sanket
    Sanket avatar
    2 posts
    Member since:
    Mar 2021

    Posted 28 Mar Link to this post

    Hello Team,

    Actually I want to create dark theme configuration for kendo react by overriding the classnames globally using scss. Suppose below is kendoDark.scss file where I am overriding input text box with background grey color.
    @import "~@progress/kendo-theme-bootstrap/dist/all.scss";
    .k-input {
      background:grey !important;
      color: $text-high-emphasis__dt;

    So In App.js file I have state of dark or light theme like  const darkMode = useSelector((state) => state.darkMode); 
    My problem is I am unable to import this kendoDark.scss file if it is dark theme.
    Can you please share me any example.Please help me here. 

  2. Sanket
    Sanket avatar
    2 posts
    Member since:
    Mar 2021

    Posted 29 Mar in reply to Sanket Link to this post

    Hello ,
    Any help on this, I am thinking of styled component but it will not be a better way to do it. And it will not understandable by other users.
  3. Krissy
    Krissy avatar
    23 posts

    Posted 29 Mar Link to this post

    Hi Sanket,

    I can suggest checking out the following blogs that provide ideas on how to achieve the dynamic changing of themes:

    The following blog post can also be helpful: 

    You can also check out the following example on how to switch the theme using styled components:

    The dynamic changing of themes can also be seen in our sample StackBlitz application:

    Hope you find these resources helpful.

    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/.

Back to Top