This is a migrated thread and some comments may be shown as answers.

Dark and Light theme using sass

2 Answers 375 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sanket
Top achievements
Rank 1
Sanket asked on 28 Mar 2021, 01:06 PM

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

Sort by
0
Sanket
Top achievements
Rank 1
answered on 29 Mar 2021, 07:25 AM
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.
0
Krissy
Telerik team
answered on 29 Mar 2021, 11:27 AM

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

Tags
General Discussions
Asked by
Sanket
Top achievements
Rank 1
Answers by
Sanket
Top achievements
Rank 1
Krissy
Telerik team
Share this question
or