Accordion content theme

[AYMEN Matador]

Greetings,

How can I apply dark theme to syncfusion component such as the accordion? 

 

I have already added a dark theme to my web  app but it still not working smoothly with the accordion active contents.

Here below the result I get:  

Thx

[Satheesh Kumar Balasubramanian]

Hi Aymen, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query and prepared sample to reproduce the reported issue at our end by rendering dark theme in accordion sample. But, we were unable to reproduce the issue in our end. 

  

Please find the sample which prepared for your issue - https://stackblitz.com/edit/angular-accordion-dark-theme?file=index.html 

  

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution as soon as possible. 

• Which dark theme you have used?
• Share the above sample with modifying code to replicate the issue.
• If you used any custom CSS, please share it.
• Syncfusion version details and browser details.

Regards, 

Satheesh Kumar B 

[AYMEN Matador]

 Hi,

Thanks your for your answer.

• Which dark theme you have used?  => Please find in attachments the sass files I am using to apply dark theme to the whole app.
• If you used any custom CSS, please share it. => No, only the sass files mentioned above
• Syncfusion version details and browser details. => 18.3.44 syncfusion verions and chrome v 90.0 as a browser.
• I still cannot find how to apply the same changes as mentioned on stackblitz in my local app

Regards

Attachment: sass_92c5d1e2.zip

[Satheesh Kumar Balasubramanian]

Hi Aymen, 

  

Thanks for your update. 

  

We have validated your reported query and suspect that you have not referred the dark theme styles properly in your application. Also, shared file do not have any accordion theme related styles. We have prepared an angular application to render accordion with material dark theme. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/165305/ze/Accordion1810450300 

  

styles.css:  

@import '../node_modules/@syncfusion/ej2-base/styles/material-dark.css';   

@import '../node_modules/@syncfusion/ej2-buttons/styles/material-dark.css';   

@import '../node_modules/@syncfusion/ej2-popups/styles/material-dark.css';   

@import '../node_modules/@syncfusion/ej2-navigations/styles/material-dark.css'; 

  

Kindly try the above sample and get back to us if you need any further assistance. 

  

Regards, 

Satheesh Kumar B 

[AYMEN Matador]

Hi Satheesh,

I am grateful for your help. Indeed, as you already mentioned, I missed to import the dark theme module in my global CSS file.

The dark mode is now fixed thanks to your assist.

Keep up the good work ++++

Regards

[Nevitha Ravi]

Hi Aymen, 

You are most welcome, please get back to us if you need any further assistance. 

Regards, 

Nevitha