vscode: adjust theme

[danth]

Various adjustments to the VSCode theme.

To do:

• [x] Make inlay hints less obnoxious
• [x] Improve status bar contrast
• [x] Improve button contrast
• [x] Improve contrast of selected item in popup menu
• [x] Fix scrollbar slider covering highlights (https://github.com/danth/stylix/issues/155#issuecomment-1739702240)
• [ ] Fix inlay hints blending in on the current line
• [x] Make editor rulers less distracting
• [ ] Fill in new options (currently set to null)
• [ ] Fix contrast of comments in diffs
• [ ] Fix contrast of find match highlight

We may also want to look into other uses of base06 and base07 and whether they could be replaced with something else, since these colors are rarely used in other modules.

Fixes #155

[danth]

Improved contrast for the status bar:

I think it's important that we keep the colored background, since in default VSCode, the status bar changes color to draw attention to certain situations.

[coffeeispower]

@danth Yes, the only case the status bar changes color is when you're debugging actually, i've never seen other cases where the status bar changes color. I was going to say that you need to adjust the button colors, but I saw you have that on your todo list.

[dafitt]

272 i improved the button font contrast

[dafitt]

273

[dafitt]

Suggestion: make editor rulers less distracting

"editorRuler.foreground": "#{{base01-hex}}",

Those that you declare with programs.vscode.userSettings."editor.rulers" = [ 80 120 ];

[dafitt]

Suggestion: I think the status bar draws way too much attention with a seperate color. If you allow to make the vscode-stylix theme a bit more unique, I would change the whole status bar background (statusBar.background) to base02 or even base00/base01. Because I think the main focus should be on the editor not the status bar.

[danth]

If we were to do that, I would suggest matching the color of the sidebar.

We could have it match the sidebar by default, but keep a unique color for the debugging state?

[dafitt]

Yes, exactly what i meant. So the following would be the only changes.

"statusBar.background": "#{{base01-hex}}",
"statusBar.foreground": "#{{base05-hex}}",
"statusBar.noFolderBackground": "#{{base01-hex}}",
"statusBar.noFolderForeground": "#{{base05-hex}}",

Opinions on the font color base05?

[dafitt]

Suggestion: The font and selectionBackground of the find/replace fields dont have the best combination, but i dont find the exact option for that.

[danth]

Yes, exactly what i meant. So the following would be the only changes.

"statusBar.background": "#{{base01-hex}}",
"statusBar.foreground": "#{{base05-hex}}",
"statusBar.noFolderBackground": "#{{base01-hex}}",
"statusBar.noFolderForeground": "#{{base05-hex}}",

I committed these. base05 is already used for the sidebar so using it on the status bar too will keep things consistent.

[danth]

It would be interesting to change the background color of the File menu to match the tab bar. I'm not sure about other environments, but it looks quite out of place under GNOME:

The color of the selected tab could also use some adjustment.

[dafitt]

I think this is not possible with the "native" menubar, because then it uses the system colors. With the "custom" menubar it uses the stylix theme, which looks good. You need to change the menubar style this in the settings: "window.titleBarStyle": "custom"

For the selected tab, i think tab.activeBackground is the key you're searching.

[dafitt]

By the way, here is the vscode theming reference: https://code.visualstudio.com/api/references/theme-color

[danth]

Suggestion: The font and selectionBackground of the find/replace fields dont have the best combination, but i dont find the exact option for that.

Looking at the guide I think this uses the input control colors

[danth]

I think this is not possible with the "native" menubar, because then it uses the system colors. With the "custom" menubar it uses the stylix theme, which looks good. You need to change the menubar style this in the settings: "window.titleBarStyle": "custom"

We may be able to change the native menubar via GTK/Qt instead, but I'll work on that separate from this PR.

[dafitt]

Suggestion: make editor rulers less distracting

"editorRuler.foreground": "#{{base01-hex}}",

@danth Could you please check with your light theme, if you still see the ruler with that color? And make a quick commit for me?

[coffeeispower]

I think this can be improved, it should have more contrast than the rest of the lines, not less

[coffeeispower]

Btw will this be backported to 23.11? I use stable nix os

[danth]

We don't really have a system in place for backporting right now, but it can be done.

[coffeeispower]

@danth you can just copy and paste the template.mustache file in the release-23.11 branch, it's not really a problem.

[danth]

Suggestion: make editor rulers less distracting

"editorRuler.foreground": "#{{base01-hex}}",

Could you please check with your light theme, if you still see the ruler with that color? And make a quick commit for me?

It's very difficult to see with base01:

base02 is an improvement:

This still isn't the best, but my scheme is quite low contrast in general, so it could just be down to that. Refer to this GNOME menu to see what I mean.

The original value for comparison. I see what you mean about it being distracting.

I think we should compromise on base02, and change the indent guides to match.

[danth]

I discovered several newer options were missing from the template. These are now set to null, and most should be given a value before this is merged.

I also added a script to do this by parsing the reference page. (Quicker than doing it by hand :sweat_smile:)

[danth]

Also discovered that comments are practically invisible in diffs.

[coffeeispower]

Only good changes with this pull request! I'm liking it! :chart_with_upwards_trend: By the way wouldn't it be better to use the workbench.colorCustomizations setting instead of installing an extension? I have to restart vscode everytime and it's quite annoying, with settings.json it hot reloads.

[danth]

Absolutely, we can work on converting to that method after this PR is done.

[dafitt]

Thank you @danth for your time, you're awesome! base02 for the rulers looks fine.

I wonder how you are testing the changes. I just put the changes manually into my nix-hm-configuration under programs.vscode.userSettings."workbench.colorCustomizations" like you saw in my issue.

[danth]

Change your Flake input to git+file:///path/to/stylix (or github:danth/stylix/vscode-adjustments if you're testing changes that were already pushed) and rebuild.

Then press Ctrl+Shift+P in VSCode and search for "Developer: Reload window" to apply the changes. It usually prompts you to reload it a second time.

[danth]

There are a few minor tasks left to do, but I'm planning to merge this soon so the bigger changes aren't delayed for too long.

Of course, follow-up PRs are welcome.

[danth]

By the way wouldn't it be better to use the workbench.colorCustomizations setting instead of installing an extension?

I tried implementing this, but any colors we set to null are inherited from the default theme. See the black borders in the screenshot below.

With the current implementation, it inherits from other colors within our extension instead.

We could work around this by defining all the colors explicitly, but then any update would cause newly added options to default to null, and the problem would resurface until we updated the template.