Allow for customizing the colors of the inline annotations

[dihmeetree]

I have the One Dark Pro theme installed for VSCode. So my inline annotations look like this

I would love to get the background and border to match my specific theme a little bit more.

Look's like the colors at the moment are statically set here:
https://github.com/opral/monorepo/blob/da25aa19ad08643e5cb7eec940eda9ba09b5804f/inlang/source-code/ide-extension/src/decorations/messagePreview.ts#L97C1-L100C42

Would love to be able to overwrite the colors for the box (border, background, etc). I was thinking some way of overwriting the colors in my settings.json file would be great I think 👍🏻

I'm picky.. I know haha.... I have some OCD so when colors are off.. it frustrates me a little bit. 😄

Thank you!

[NilsJacobsen]

The default could also be out of the theming tokens to match the look.

[felixhaeberle]

Hey, I looked more closely at this and it seems we need multiple states for this inline annotation to work correctly.

3 states:

• working/success: display the message
• warning: display the warning with a warning color
• error: display the error with a error color

We have to account for all of those 3 states with coloring, meaning that if we offer a way to modify them, we need a way to style 3 states instead of only 3 variables for example, resulting in 9 variables (border, background, text * 3).

---

Furthermore, these 3 states are depending on the states the lint rule system of inlang is exposing, resulting in a dependency there. This requires the states (& styling) to change if we ever decide to have more than 3 states for lint rules, or multiple types of lint rules, such as code lint rules.

I'll come up with a concept 👍
As a first step, we can specify the defaults better (theme specific) & have a minimal settings layer where current states can be styled.

something like:

"sherlock.theme.annotation": "rgba(153, 153, 153, .8)",   
"sherlock.theme.annotationBorder": "rgba(153, 153, 153, .8)",   
"sherlock.theme.annotationMissing": "#d37070",   
"sherlock.theme.annotationMissingBorder": "#d37070",