What is the best way to style the new inlay type hints in the Dark Plus theme?

[David-Else]

@kirawi @janos-r @AlexanderBrevig @korken89

Now we have type hints! #5934. This is how VS Code looks (I think, this screen shot from the docs could be out of date):

VS Code

Dark Plus styles them in white at the moment as it has no "ui.virtual.inlay-hint" yet, and that doesn't look great as they really need to either stand out or be a lot fainter so they are obviously different from the rest of the code:

Right now, no `"ui.virtual.inlay-hint"

This is how it would look with "ui.virtual.inlay-hint" = {fg = "text", bg = "dark_gray4" }. This seems the closest match to VS Code, but I might be wrong. It doesn't look great to me, needs space at the edges and the original rounding looks much better, what do people think?:

{fg = "text", bg = "dark_gray4" }`

maybe just fg = "dark_gray4", not following VS Code, but minimal is probably best as it makes them less distracting. What are the other themes doing?:

fg = "dark_gray4"

[korken89]

Awesome to hear! IMO the last suggestion is the best, minimal is more :)

[korken89]

Alright, I have tested the last suggestion on a good screen (XPS15) and an old screen Thinkpad X230, and it works well on the XPS15 but disappears on older screens with less contrast unfortunately.

[ivktac]

What do you think about { fg = "white", bg = "#424242" }, where #424242 is blending colors text and background by 10%.

How it looks in helix:

and original in vscode:

[korken89]

Looks nice!

[korken89]

I did also test this on a good screen (XPS15) and an old screen Thinkpad X230, and it works well on both.

[David-Else]

I had a look with the browser developer tools and the background grey in your VS Code screenshot is #444444:

It is hard to grab the white, but I have a feeling that "white" is too bright, can we look at the original VS Code files and get an exact match? What do you think of fg = "text"?

[ivktac]

I agree fg = "text" is reasonable.

[ivktac]

Looking at https://github.com/microsoft/vscode/blob/cd1d31179d612c380262746f00d35ed072dc7728/build/lib/stylelint/vscode-known-variables.json#L106-L111, I found out the VS Code uses #ffffff and rgba(77, 77, 77, 0.8). As Helix doesn't support opacity to color (I'm not sure), we could use #4d4d4d (same as original background color in VS Code just without opacity).

And I agree white is too bright, so fg = "text" looks good to me.

By the way, we could also copy the dark+ experimental version port, they use #8b949e and #8b949e33 (similar to #353739)

How it looks:

[David-Else]

I think the dark+ experimental version inlay hints look the best, what exactly did you enter to get that screenshot? #8b949e33 and #8b949e give funny results, sorry I don't know anything about colour codes if that is a dumb question.

[gabydd]

#8b949e33 is hex code plus an alpha(transparency) value which seems to be about equivalent too #E8EAEC