Explore updated built-in color themes

[daviddossett]

Our built-in themes (e.g. Dark+, Light+) are, as you might expect, among the most popular themes used by VS Code users. However, as the years have gone on, the themes are starting to feel dated. I think it's worth exploring how we could refresh them to ensure VS Code continues to feel modern and fresh as well as solving for known contrast/usability issues along the way.

Examples

These quick sketches show what Dark+ and Light+ could look like if only the workbench theme colors were updated. They do not change the syntax highlighting, however that could make sense as a next step.

Next steps

There are at least two clear options to move forward. I'm sure there are other approaches, but two obvious paths include:

1. Gradually update the existing themes over a series of releases.
2. Release a net new set of themes but keep the old themes as a "legacy" option. New installs would get the new themes automatically. Existing installs could be prompted to switch to the new theme or keep the legacy theme if they perfer.

Feedback and thoughts welcome 🙏

[awerlogus]

In my personal color theme, I painted the sidebar in the same color as the editor area so it would not attract the attention of peripheral vision while editing the code

[daviddossett]

Here are some updates after talking with the team. Feedback welcome.

Rolling out the new themes

This is likely to take place over two phases:

1. Add "Experimental" themes to VS Code to gather feedback on the new themes
2. When ready, the new themes will be set as the default, replacing Dark+ and Light+. If you are currently using either the Dark+ or Light+ theme, you'll get a notification telling you that we've updated them. This notification will let you switch back to the old one if you'd prefer. It's likely that we will move the old themes to the marketplace rather than keep them in the product. This means you can install the themes as an extension pack.

So what do they look like?

Here are a few options that we're looking at:

Dark

Dark editor, everything else lighter:

Dark sidebar, everything else lighter:

Light editor, everything else darker:

Entire workbench normalized to one darker color:

Light

Grey sidebar, everything else white:

White editor, everything else grey:

Entire workbench normalized to white:

cc @esonnino

[awerlogus]

Yet another option: everything around the editor is painted in its color, the rest is darker

[Studio384]

I throw my hat in for these 2:

• Dark theme: Light editor, everything else darker
• Light theme: White editor, everything else grey

They're the logical choice since we perceive lighter things to be close by and thus be the most important elements on screen.

[daviddossett]

Dark theme: Light editor, everything else darker Light theme: White editor, everything else grey

👍 that's is basically what I went with to start. Here's a quick look at how it looks just touring around the basic UI:

https://user-images.githubusercontent.com/25163139/204674428-024a2a9f-880c-46eb-9659-2d19d16b3e2c.mp4

I'll get this landed in Insiders in the next week or so so you can give it a spin 🙏

[abhijit-chikane]

I throw my hat in for these 2:

• Dark theme: Light editor, everything else darker
• Light theme: White editor, everything else grey

They're the logical choice since we perceive lighter things to be close by and thus be the most important elements on screen.

Instead it would be great if somehow you able to give choice to user to choose the combination he/she prefers

One improvement could be instead of just highlighting the top border of the active editor tab we can do something like browser where it just fluently merges the active tab into the page Here's how it looks on the edge browser

anyway this new theme looks good

thank you

[daviddossett]

The new themes are now merged via https://github.com/microsoft/vscode/pull/167104.

Please feel free to file new issues as you try them out so I can better track them individually 🙏

[nonameolsson]

Nice work! 👍🏻 I'm not so experienced with themes in VS Code. How can we try it out?

[nickolasoverlay]

Hi, i found a small issue. If i choose the updated built-in theme (Dark+ V2), the theme choice gets automatically reset to the the old Dark+ version. Same thing happens if i choose any other theme.

Version: 1.75.0-insider Commit: b92894493e6f971a3c71912d823e699d3a05d643 Date: 2022-12-08T05:37:36.940Z Electron: 19.1.8 Chromium: 102.0.5005.167 Node.js: 16.14.2 V8: 10.2.154.15-electron.0 OS: Darwin arm64 22.2.0 Sandboxed: Yes

https://user-images.githubusercontent.com/65836795/206389533-485b9ecc-922f-4409-8045-0a94efc6873b.mov

[nonameolsson]

Hi, i found a small issue. If i choose the updated built-in theme (Dark+ V2), the theme choice gets automatically reset to the the old Dark+ version. Same thing happens if i choose any other theme.

Version: 1.75.0-insider Commit: b928944 Date: 2022-12-08T05:37:36.940Z Electron: 19.1.8 Chromium: 102.0.5005.167 Node.js: 16.14.2 V8: 10.2.154.15-electron.0 OS: Darwin arm64 22.2.0 Sandboxed: Yes

Screen.Recording.2022-12-08.at.09.48.12.mov

I can confirm that the same things happens for me with Insiders.

[daviddossett]

@nickolasoverlay @nonameolsson I see the same behavior now too after updating to today's Insiders. I believe this is an issue with the quick pick that includes but isn't specific to themes. https://github.com/microsoft/vscode/issues/168425.

A workaround for the moment would be to set "workbench.colorTheme": "Default Dark+ Experimental" in your settings.json file.

[mon-jai]

The blue code color in updated light theme feels weird. It has a higher saturation than other colors of the theme.

We should lower its saturation IMO.

[Igorgro]

Tried new the Dark theme in 1.75. In my opinion, it is much darker than the previous theme, very close to #000000 and should be called "black theme", not "dark". Comparing with GitHub, for example, old dark theme is like "dark" and new dark theme is like "dark high contrast". I prefer to stay on old theme

[widersky]

I'm on the other side - the new themes are great! You can consider adding their more subdued variations in the future (e.g. a slightly lighter dark mode) but the current options are great and I use them every day :)

[LasseRosenow]

I think the editor is a bit too light in dark mode. I would prefer if the editor would be darker, so the contrast between the background and the code colors could be higher. :)

[dlschmidt]

https://github.com/microsoft/vscode/issues/173475 Please inspect this bug when working with terminals under V2 themes.

[smbkr]

@daviddossett would you prefer feedback on the new themes via separate issues, or in this thread?

A minor bit of feedback:

With Light+ v2, it's much harder to tell which tab in the sidebar is selected. Compare the two screenshots:

v1	v2

In the "old" theme, the whole icon foreground colour changes, so it's easy to see what tab is active at a glance. With the v2 theme, only the chip to the left indicates the selection, which is hard to see, especially when using a fullscreen or left-aligned window, as it blends in with the bezel of the screen.

[daviddossett]

would you prefer feedback on the new themes via separate issues, or in this thread?

Ideally in new issues. But I continue to monitor this one as I tweak the themes based on the feedback.

The active items are actually a darker/lighter color than the inactive items, but I agree that it could be more obvious. I'll see what I can do here and will push up some changes 👍

[quackerex]

Thoughts on adding translucency and blurring to the sidebar and the tab bar?

[zeyugao]

I wonder why the remote icon in the left-bottom corner is blue while the other areas are all white or black. It always attracts my eyes.

[daviddossett]

Thoughts on adding translucency and blurring to the sidebar and the tab bar?

@quackerex this is something we've talked about to inherit some nice Fluent design bits, but I believe it isn't possible with an electron-based app at the moment.

I wonder why the remote icon in the left-bottom corner is blue while the other areas are all white or black. It always attracts my eyes.

@zeyugao this is mostly to encourage usage of remote development. But we could consider making it less prominent if others have the same feedback. cc @bamurtaugh for remote context.

[bamurtaugh]

Yes, would definitely be interested in the broad remote indicator feedback here! As it's already a small and potentially unfamiliar button, the goal of a more prominent color is as @daviddossett mentions (attracting attention is a good thing from this perspective 😄).

[aradalvand]

@daviddossett Hey there, I just wanted to chime in and say that I've personally tried the new theme and I think it looks really nice. The design choices strike a great balance between usability and aesthetics. So, great job! Definitely a massive improvement over the old Dark+. Hopefully it replaces old Dark+ as the default soon.

I made the switch from Material Theme and found the better overall contrast a breath of fresh air (Material Theme has always had pretty bad contrast, but looked a lot better and more modern than the default Dark+.).

However, I did notice one thing that may be a bit unideal in Dark+ V2. When it comes to things like Git diff markers (or whatever they're called), the contrast/brightness is a bit too much for my liking, I think the legacy Dark+ version had a more suitable, slightly dimmer color for these elements — this is how it looks in legacy Dark+:

And this is Dark+ V2:

[daviddossett]

Thanks for the find @aradalvand. I'll take a pass at these to make them less prominent 👍

[mrcaidev]

Personal opinion: This blue border on focus is a bit distracting. And the right border is somehow hidden.

[widersky]

@mrcaidev it's easy to disable and AFAIK enabled for accessibility. You can disable it by adding this to your settings.json:

"workbench.colorCustomizations": {
    "focusBorder": "#ff000000",
    "list.focusAndSelectionOutline": "#ff000000",
}

[akpircher]

One of the reasons I've really settled on VSCode as my editor is because the default Dark+ theme does not have a lot of high contrast.

The new V2 theme seems more like a hybrid between the Dark High Contrast and existing Dark+, and within seconds of having either of those themes open, my eyes begin to hurt and I can feel a headache forming. It's also a lot harder to read filenames that have problems - the contrast between the yellow and the black almost render my glasses useless, I'm curious if anyone else with an astigmatism is having similar problems.

Does moving the current Dark+ Theme to the marketplace mean it will eventually stop being maintained or not be updated as frequently? If so, would it be possible to call this theme "Dark+ Mid Contrast" or something instead?

[xamir82]

@akpircher I don't see a reason why someone couldn't just keep using the old Dark+ if they so prefer. I don't think they're going to remove it or anything.

[akpircher]

@xamir82 they say pretty explicitly above that the experimental V2 will, once it's not experimental anymore, replace the Dark+ default and the current Dark+ will be moved to the marketplace.

Hence my questions about maintenance.

[kytosai]

I think "Dark sidebar, everything else lighter" is the best choice, because it has just enough contrast, not too dark. And it gives a better experience than the current "Dark+ V2" (it's too black)