vscode
vscode copied to clipboard
microsoft
Dark themed window on light themed macOS should look better
Dark themed window is missing a dark border when macOS theme is set to light. For example Slack have no problem with this despite the fact that it also uses Electron.
(Slack in background)
The VSCode window border should look the same - at the moment it just looks bad. It feels like the window at the borders is losing its "sharpness". Slack shows that it can be achieved. Therefore, please do something about it, because now it looks terrible.
The Appearance Which is Wrong and Counterintuitive
Yes I agree and it is a good chance to change the shadow and stroke in Windows,too.
In macOS,the windows have a light stroke inside and a dark one outside while the windows have a light stroke outside. It's confusing.
Windows
It has an outer white translucent stroke. Then there are the black translucent shadows.
macOS
What Apple has done
In macOS, the white semi-transparent stroke is on the inside of the window, and the black semi-transparent stroke is on the outside of the window combined with the drop shadow. This not only ensures that the projection and the window are natural, but also ensures that the layers are clear when the windows are superimposed.
https://developer.apple.com/videos/play/wwdc2018/210/?time=537 (08:57)
"Next, we took a look at the rim shadows and saw what changes we needed to do for those, and the changes that we did for Dark Mode where we adjusted the opacity to make them a little bit higher so that the contrast edge was more defined and that we made them a little bit crisper. To further the focus and the edge detail on the windows, we added an inner rim stroke to the windows to really help define the windows and pop them off. The end result is that the visual cue still looks very similar to the light appearance, but the end result has been finely tuned for dark appearance so that it works much better."
I know part of the reason here is that since Windows 8, that edge is part of the window's accent color. But that doesn't really tell the story, because even then, as of today, it should be a white inner stroke instead of a white outer stroke.
What we Have Learned From Sketch Since 14th Century
The defect of white outer stroke + black shadow is obvious, compared to the white inner stroke, it can not clearly show the window hierarchy, it gives a strange feeling. The white stroke inside the window + black outer stroke + black projection is very clear, just like the reflection + projection of the dark part of the object in the sketch.
The green arrow is the reflection of the dark part of the object (like the white translucent inner stroke), the red arrow area is the darkest projection (like the black translucent outer stroke), and the blue arrow is the shadow that fades out (like the window projection)
So
@misolori
That is why it should be changed
As far as I can tell, we are not setting any border around the window, we just create a frameless window. If someone knows what we do "wrong" or could do better compared to other Electron apps, happy to review a PR.
Window is created from here:
https://github.com/microsoft/vscode/blob/49f73faa18386aa79ee660fada24c9d3b332a3e0/src/vs/platform/windows/electron-main/windowImpl.ts#L200
This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.
Happy Coding!
@bpasero @widersky
In Slack, when I set the option to true, the border color changes, but it remains the same when I set it to false.
However, in VsCode, the border color changes no matter what the option is set to. I even tried commenting out the relevant function in VsCode to see if that would fix the issue, but it didn't work. The only thing the option does in VsCode is prevent the theme change, but the native window borders and other elements such as the traffic lights still change.
https://github.com/microsoft/vscode/blob/5e00b5b7da6bafe58b6fb1f7979927773a4979ab/src/vs/platform/theme/electron-main/themeMainService.ts#L51-L54
Dark themed window is missing a dark border when macOS theme is set to light. For example Slack have no problem with this despite the fact that it also uses Electron.
(Slack in background)
The VSCode window border should look the same - at the moment it just looks bad. It feels like the window at the borders is losing its "sharpness". Slack shows that it can be achieved. Therefore, please do something about it, because now it looks terrible.
@jhaemin So far from what I see the task is still up for grabs, so this feature hasn't been implemented yet.
Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for similar existing issues. See also our issue reporting guidelines.
Happy Coding!