Changing CSS for toobar header for DarkMode

[Rodolfo A. Calvo Jaubert]

Hi team! I am currently using the component for the RichEditor however it looks almost impossible to change the CSS in order to match the styles of the app. 

Is there any way I can alter the styles for get the CSS to reach consistency in the styles of the application? 

In this case, I cannot change the background color of whole toolbar for .dark-mode

[Vinitha Jeyakumar]

Hi Rodolfo A. Calvo Jaubert,

Can you please share us with more details about the reported issue to replicate the issue on our end?

• Share the details of the dark theme you are using with Syncfusion RichTextEditor?
• Are you using any custom CSS styles to achieve the dark theme in your application? if so, please share the simple issue replicating runnable sample.
• Share entire code snippet?
• Your package version?

Regards,

Vinitha

[Rodolfo A. Calvo Jaubert]

Hi! Thanks for answer.

Unfortunately I cannot send the full code because it is full SCSS lib that already manage the .dark-mode however in my angular styles.scss I am trying to change manage this change, but I cannot find any docs that let me reach this goal. I do not know what are correspondence classes in order to change background color of the header, color of the buttons when hover and so on. 

.dark-mode {

  .e-richtexteditor .e-rte-content,

  .e-richtexteditor .e-source-content {

    background: #141c26 !important;

    color: #cad9ed; // TODO: Make a variable

    font-family: "Overpass", sans-serif; // TODO: Make a variable

  }

}

This works fine for the textarea however for the header no clue.

[Vinitha Jeyakumar]

Hi Rodolfo A. Calvo Jaubert,

Your requirement to customize the background color for the RichTextEditor's toolbar can be achieved by using the below CSS styles,

Code snippet:

 

.e-toolbar .e-toolbar-item .e-tbar-btn {

  background: gray;

}

.e-toolbar .e-toolbar-items {

  background: grey;

}

.e-toolbar.e-extended-toolbar .e-toolbar-pop {

  background: gray;

}

.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {

  background: gray;

}

.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay {

  background: gray;

}

.e-toolbar {

  background: gray;

}

.e-richtexteditor .e-rte-content,

.e-richtexteditor .e-source-content {

  background: gray;

}

.e-toolbar .e-hor-nav,

.e-toolbar .e-hor-nav:hover,

.e-toolbar .e-hor-nav:active {

  background: gray;

}

Stackblitz-sample: https://stackblitz.com/edit/angular-dhyeqm?file=src%2Fapp.component.css,src%2Findex.html

Regards,

Vinitha