We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic theme light/dark with dynamic colors

Hi,


I'm trying to make a dynamic theme switch between light & dark for syncfusion.


I've followed those examples: 

https://www.syncfusion.com/kb/10868/how-to-load-themes-dynamically-in-syncfusion-components

https://www.syncfusion.com/forums/165712/apply-dark-theme-dynamically-on-toggle-button

And they work for static themes, the problem is I need to change the primary, accent and other colors dynamically. Users in my app can choose between a variety of primary & secondary colors.


A solution would've been the imports with scss files but it doesn't work anymore as seen in this issue :

https://www.syncfusion.com/forums/155599/how-to-dynamic-toggle-the-dark-model-theme

I still tried it and it doesn't work.

I'm using Angular 14 and Syncfusion 20.3.50.


Can you release minified css files using css vars instead of direct colors ? In this way I could import the css then change the corresponding variables and that would work.

Or can you provide an example using scss that allows a switch between dark and light themes with custom primary color that is dynamic. For example primary color changed with a color picker.


Regards


1 Reply

JS Jamuna Sundaram Syncfusion Team December 7, 2022 02:51 PM UTC

Hi Théo Armengou,



We have created a sample on stackblitz with Angular platform for toggling  between light and dark theme. In the below attached sample we have rendered a grid component and added the toggle option to switch between light and dark mode for material theme. In-between we will prepare an  angular sample to change the  primary color with a color picker option. Also ,In  Syncfusion theme studio platform we have the option to switch the  primary color with the color picker control.

Please refer the below stackblitz  sample,

https://stackblitz.com/edit/angular-qerqnt-akji8c?file=app.component.html,app.component.ts,index.html


Please refer the theme studio platform ,

https://ej2.syncfusion.com/themestudio/?theme=material

Regards,
Jamuna Sundaram


Loader.
Live Chat Icon For mobile
Up arrow icon