2

I'm currently developing an app that uses Kendo React UI for charts and I want to add the possibility of switching themes between light and dark from UI.

I'm using React and Sass for styling and two different Kendo-React themes, the light is the default one made by kendo, the dark is one is made by me with the Kendo Theme Builder.

I've tried to achieve the theme changing via pure scss:


.light {
  @import '~@progress/kendo-theme-default/dist/all.scss'
}

.dark {
  @import 'path/to/custom/theme.scss'
}

and changing between those two classes on state change.

I've tried to use scss @mixin:

file with the theme style:


@mixin light {
...all properties and classes
}

App.scss:


@import light;

.light {
  @include light
}

I've tried with react-helmet having two links and using just the correct one:


<div>
  <Helmet>
    <link rel={isDark ? "stylesheet" : "stylesheet alternate"} href="path/to/custom/theme.scss"/>
    <link rel={!isDark ? "stylesheet" : "stylesheet alternate"} href="path/to/default/kendo.scss"/>
  </Helmet>
</div>

or having one link with the path to the correct scss file:


<div>
  <Helmet>
    <link rel="stylesheet" href={isDark ? "path/to/custom/theme.scss" : "path/to/kendo/default.scss}/>
  </Helmet>
</div>

I've also tried conditionally import those files in a useEffect:


useEffect(()=>{
  if(isDark) require('path/to/custom/theme.scss')
  else require('path/to/kendo/theme.scss')
},[isDark]}

None of the above has worked, some haven't made absolutely any changes and others have changed the UI from a blank page to only the outline of the bar chart series, without any colors or styling.

Obviously, if I try to import the default theme or the one made by me without trying to change it at runtime all of the 2 works flawlessly.

Have someone encountered this as well? How can I achieve the theme switcher?

0 Answers0