Toolbar style and CSS customization

[byronigoe]

Thank you for this module. My app supports Dark Mode, and I'm having trouble customizing the style of angular-editor-toolbar (e.g. changing the background-color), especially since ::ng-deep is deprecated. Could its classes use and expose a variable instead?

[gajen007]

I also having the same issue, as my ionic (angular) app runs in dark mode where both background & texts are white so the user cannot identify them.

[reedanj]

@gajen007 I had the same issue but found if you change the styles using classes like .angular-editor-toolbar in your global.scss file with the !important added on the end then it changes the styles.

[AylaWinters]

I was able to do the same with my styles.css file:

.angular-editor-toolbar 
.angular-editor-toolbar-set 
.angular-editor-button {
    background-color: #474545 !important;
}

.ae-font .ae-picker-options {
  background-color: #474545 !important;
}

.ae-font .ae-picker-label {
  background-color: #474545 !important;
}

.angular-editor-toolbar {
  background-color: #474545 !important;
}

.angular-editor {
  max-width: 760px;
  margin: 10px auto;
}

[jduerr]

Adding on @AylaWinters answer:

If you want, you can use the ionic themes variables instead of hex codes for the colors. By doing so, the editor will change its colors automagically if user or operating system changes from light to dark mode and vice versa:

`.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button { background-color: var(--ion-color-light) !important; }

.ae-font .ae-picker-options { background-color: var(--ion-color-light) !important; }

.ae-font .ae-picker-label { background-color: var(--ion-color-light) !important;

}

.angular-editor-toolbar { background-color: var(--ion-color-light) !important; }`