There are a few things you could do, all of them involve CSS (so you need a custom CSS file).

If you want to use the same color you could add this rule:

.text-input-highlight-container .text-highlight-tag {
    color: some_color;
}

If you want to have a fixed color with different background colors:

.bg-blue {
    color: some_color;
}

.bg-pink {
    color: some_other_color;
}

If you want to be able to put different colors per background color:

.text-blue {
    color: blue
}

.text-red {
    color: red;
}

And then you change your code to add those text color classes:

tags: HighlightTag[] = [{
  indices: { start: 8, end: 12 },
  cssClass: 'bg-blue text-red',
  data: { user: { id: 1 } }
}];

This only works with a few colors though because it appears to be superimposed on the original black text.

So in order to make this work with every kind of color you need to make the regular text transparent:

.text-input-highlight-container textarea {
    color: transparent;
}

And in your code you apply the hightlight to all text but don't put any classes for regular text e.g.

tags: HighlightTag[] = [{
  indices: { start: 0, end: 11 },
  cssClass: '',
  data: { user: { id: 1 } }
},
{
  indices: { start: 8, end: 12 },
  cssClass: 'bg-blue text-red',
  data: { user: { id: 1 } }
}];

The first part will look like regular text and the latter will have a blue background with red text.

Hope this makes sense.

Update:

Be sure to add the indices of the non-highlighted text to the HighlightTag array as well, as shown here: https://stackblitz.com/edit/angular-ivy-my8her?file=src%2Fapp%2Fapp.component.ts (the css doesn't apply on Stackblitz though), so that it get wrapped in a span as well.

And if you have set the color to transparent you need to provide a default color for the text within the spans.

.text-input-highlight-container .text-highlight-tag {
    color: black; //or any other color you want for the non-highlighted text
}

Then you can do

.bg-blue { color: lightblue !important; } //background-color for bg-blue is lightblue so I wouldn't set text color to lightblue though

With color set to white for .bg-blue it'll look like this:

Update 2:

I looked a little deeper at the HTML and you don't have to wrap the unhighlighted text in a span if you don't want to. This should do the trick:

.text-input-highlight-container .text-input-element { //the textarea
    color: transparent;
}
.text-input-highlight-container .text-highlight-element { //the superimposed text
    color: black;
    border-color: transparent; //otherwise you'll get a black border
}
.bg-blue {
    color: white;
}

Applied to the demo page: