1. Home
  2. Forum
  3. Angular - EJ 2
  4. how to dynamic toggle the dark model theme ?

how to dynamic toggle the dark model theme ?

Hi,

I have a function, click a button to toggle the dark and light theme, I follow the below link:

https://ej2.syncfusion.com/themestudio/?theme=material
https://ej2.syncfusion.com/angular/documentation/common/how-to/sass/


But the theme studio downloads one theme only every time, how do I use the two downloaded themes when I toggle the dark and light  model? 

I'd like to use the scss files and global variants to change the theme, but how to I change the variants dynamic ?

eg, can I set the "--accent-color" value to "$accent" dynamic ? Or find a way to apply the "body.dark" class for the dark model theme ? I have no idear.

Can you help me ?




9 Replies 1 reply marked as answer
JA Jesus Arockia Sankaran S Syncfusion Team June 30, 2020 12:08 PM UTC

Hi lorryl, 

Thank you for contacting Syncfusion support and sorry for the inconvenience.  

We have checked your query and we want to inform you that we can change the dynamically using the generated file from theme studio as in the below KB (Knowledge Base) documentation. Also, we have shipped the dark theme with in package itself. 


We have created a sample for dynamically changing the color that you can download from the below link.  


Code Snippet: 

./src/app/styles.scss 

.light { 
    @import 'ej2/material.scss'; 
} 
 
.dark { 
    @import 'ej2/material-dark.scss'; 
} 
 

./src/app/app.component.ts 

 <div class="light"> 
             <h1> Light Theme </h1> 
             <ejs-calendar class="light"></ejs-calendar> 
             <ejs-grid  class="light" [dataSource]='data'  [allowSorting]="true" 
               [allowFiltering]="true" [allowGrouping]="true"> 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> 
                </e-columns> 
                </ejs-grid> 
             </div> 
             <br> 
             <div class="dark"> 
             <h1> Dark Theme </h1> 
             <ejs-calendar class="dark"></ejs-calendar> 
             <ejs-grid  class="dark" [dataSource]='data'  [allowSorting]="true" 
               [allowFiltering]="true" [allowGrouping]="true" > 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> 
                </e-columns> 
                </ejs-grid> 
             </div> 
 



Please get back to us if you need any further assistance on this. 

Regards, 
Jesus Arockia Sankaran S 


LO lorryl July 1, 2020 09:01 AM UTC

Thanks for your advice. It works in the sample!

But, if I add the body class in the scss, it will lose all the ej2 style.  not work for  "body .light" or "body.light".

Actually, I will put the light and dark class in the body element. But it does not work after add the "body" in scss.




FS Fabian Salzgeber July 3, 2020 06:25 AM UTC

From a quick glance at your code, I would say you need to set your CSS rule like this: body.light {...}
Without the space between the tag and the class name.
Assuming, you set the class on the body like this: <body class="light">

LO lorryl replied to Fabian Salzgeber July 3, 2020 06:29 AM UTC

From a quick glance at your code, I would say you need to set your CSS rule like this: body.light {...}
Without the space between the tag and the class name.
Assuming, you set the class on the body like this: <body class="light">

I tested both the "body .light" and "body.light". it will lose all the ej2 css, so not work.




FS Fabian Salzgeber July 3, 2020 05:13 PM UTC

Apparently, the sass spec discourages the use of @import and will discontinue to do so in the future.

"@import makes all variables, mixins, and functions globally accessible."

As it seems, adding @import inside a class does not work.

There is another option, but it looks very complicated if you want to include styles separately for different components:



LO lorryl replied to Jesus Arockia Sankaran S July 6, 2020 10:11 AM UTC

Hi lorryl, 

Thank you for contacting Syncfusion support and sorry for the inconvenience.  

We have checked your query and we want to inform you that we can change the dynamically using the generated file from theme studio as in the below KB (Knowledge Base) documentation. Also, we have shipped the dark theme with in package itself. 


We have created a sample for dynamically changing the color that you can download from the below link.  


Code Snippet: 

./src/app/styles.scss 

.light { 
    @import 'ej2/material.scss'; 
} 
 
.dark { 
    @import 'ej2/material-dark.scss'; 
} 
 

./src/app/app.component.ts 

 <div class="light"> 
             <h1> Light Theme </h1> 
             <ejs-calendar class="light"></ejs-calendar> 
             <ejs-grid  class="light" [dataSource]='data'  [allowSorting]="true" 
               [allowFiltering]="true" [allowGrouping]="true"> 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> 
                </e-columns> 
                </ejs-grid> 
             </div> 
             <br> 
             <div class="dark"> 
             <h1> Dark Theme </h1> 
             <ejs-calendar class="dark"></ejs-calendar> 
             <ejs-grid  class="dark" [dataSource]='data'  [allowSorting]="true" 
               [allowFiltering]="true" [allowGrouping]="true" > 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> 
                </e-columns> 
                </ejs-grid> 
             </div> 
 



Please get back to us if you need any further assistance on this. 

Regards, 
Jesus Arockia Sankaran S 


Hi,

Because the @import not work in "body.dark", so only the below way to change theme dynamic ?


If I download the light and dark themes, do I still need to add the follow scss?


JA Jesus Arockia Sankaran S Syncfusion Team July 7, 2020 11:41 AM UTC

Hi lorryl, 
 
Sorry for the inconvenience. 
 
No, there is no need to import style files for Syncfusion components if you follow the method in the below KB for dynamic theme change. 
 
 
We were able to reproduce the reported issue and we already have a feature request to improve our SASS support. We will consider this problem along with that and you can keep track of this feature request using the below feedback portal link.  
 
 
We expect that it will be available with our Volume 3, 2020 release. If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. 
Please get back to us if you need any further assistance on this. 
Regards, 
Jesus Arockia Sankaran S 


LO lorryl November 11, 2020 09:46 AM UTC

Hi,

I've seen the below feedback portal link is completed, But I don't know how to use it.
 

JA Jesus Arockia Sankaran S Syncfusion Team November 11, 2020 01:52 PM UTC

Hi lorryl, 

Yes, we have completed the feedback for using latest version of SASS compilers and we have also promised to consider the dynamic theme change along with that feedback. We want to inform you that we can only compile SCSS in server side as of our current architecture and we are not able to compile/change the color values at runtime in client side.  

So, we request you to follow the method suggested in our earlier update for theme changing as in below KB. 


Please get back to us if you have any queries. 

Regards, 
Jesus Arockia Sankaran S 


Marked as answer
Loader.
Up arrow icon