QuillJS color picker change inline style to classes

Question

I am using QuillJS and library for Angular ngx-quill. I want to create custom color-picker with only four colors, and at the output get the following

<span class="midnight-blue">Some text<span>

But standard color-picker adds inline-styles to tag, that does not suit me, because Angular sanitizer removes these styles. This is what I have now:

<quill-editor
id="quill"
theme="snow"
placeholder="Your text here"
format="json"
[modules]="editorConfig"
[(ngModel)]="content"
(ngModelChange)="onModelChange()">
<div quill-editor-toolbar>
   <div class="ql-formats">
      <select class="ql-color">
         <option value="rgb(0, 0, 0)"></option>
         <option value="rgb(230, 0, 0)"></option>
         <option value="rgb(255, 153, 0)"></option>
         <option value="rgb(255, 255, 0)"></option>
      </select>
   </div>
</div>

Is it possible to create my own color-picker with adding styles through classes?

Answer 1

I solved this in the following way

<div quill-editor-toolbar>
      <div class="ql-formats">
        <select class="ql-color">
          <option value="darkestYellow"></option>
          <option value="darkMintColor"></option>
        </select>
      </div>
</div>

//styles on Editor side
.ql-active[data-value='darkestYellow'] {
    .bubble-icon {
      background-color: transparent;
      fill: @darkestYellow
    }
}

.ql-picker-item[data-value='darkestYellow'] {
    background-color: @darkestYellow;
}

//styles on client side
.ql-color-darkestYellow {
    color: @darkestYellow
}