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
    Admin
    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:
    https://medium.com/swlh/dynamically-import-css-d8222423f109 
    https://magbicaleman.medium.com/intro-to-dynamic-import-in-create-react-app-6305bb397c46 

    The following blog post can also be helpful: 
    https://stackoverflow.com/questions/18510347/dynamically-load-stylesheets 

    You can also check out the following example on how to switch the theme using styled components:
    https://stackblitz.com/edit/react-gjjqct?file=app/main.jsx 

    The dynamic changing of themes can also be seen in our sample StackBlitz application:
    https://stackblitz.com/edit/github-h2aree?file=src/App.js 

    Hope you find these resources helpful.

    Regards,
    Krissy
    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