Dark and Light theme using sass

[Sanket]

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. 

[Sanket]

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.

[Krissy]

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