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.
Up arrow icon