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 Answers, 1 is accepted
Rank 1
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.
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/.