A white line at the top of the window on macOS Monterey

[Eureka-0]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version:版本:
  1.65.0
  提交: b5205cc
  日期: 2022-03-02T11:13:50.741Z
  Electron: 13.5.2
  Chromium: 91.0.4472.164
  Node.js: 14.16.0
  V8: 9.1.269.39-electron.0
  OS: Darwin arm64 21.3.0

• OS Version: macOS 12.2.1 (21D62)

Steps to Reproduce:

As long as the system is in light mode and vscode is in a dark theme, a white line will appear on the top of the vscode window. When the system switches to dark mode, it will disappear. This white line is really distracting. Hope you can fix this.

[bpasero]

Not sure whether this may be from our custom title or a general Electron / OS issue.

[rzhao271]

The issue reproduces in Big Sur on the Insiders and Exploration builds, as well as on Electron Fiddle, but not Microsoft Edge.

[deepak1556]

@rzhao271 can you try with vscode PWA application.

[Eureka-0]

@rzhao271 can you try with vscode PWA application.

I installed vscode PWA application from chrome, and there seems to be no white line.

[rzhao271]

I have confirmed the issue has been in Electron since version 9.

[meadowsys]

Can confirm. Also a few screenshots of how the borders look in light/dark mode, hoping they help (I think you can just about see the side borders):

I noticed that in dark mode, it becomes more of a uniform border along the edge of the whole window, whereas in light mode, the borders on the side and bottom are almost gone, and the border on the top (wrapping around the rounded corners a little) are significantly brighter

[hologerry]

Upvote for solving this issue.

[jhaemin]

It's so annoying and catches my eyes every time I see the VSCode windows.

Maybe the issue is related to Electron and I think there are solutions for this.

• Mojave dark mode causes a white line at the top of Electron apps electron/electron#13164
• Fix the grey line rendered at the top of window on Mojave electron/electron#15008

---

Here are some Electron apps that resolve the white top border. They have light (no white) border surrounding the window, or even without border.

Here are some Electron apps that can toggle light/dark mode manually. And in dark mode (macOS light mode), they have light (no white) border surrounding the window which looks more natural.

Just like these apps, VSCode may fix this issue by applying dark mode border when using dark theme.

Cron (dark mode)

Slack (dark mode)

MongoDB Compass (dark mode)

---

I'm not sure Figma is built on Electron, but they may resolve the issue by just removing the border like native apps. e.g.) Final Cut Pro, iTerm (screenshots below)

Figma

I'm not sure Figma is built on Electron

---

Here are some Electron apps that also suffer from white top border like VSCode.

VSCode

Slack (light mode)

GitKraken

Trello

Notion

Spark

---

And lastly here are macOS native apps.

Clock

Final Cut Pro

iTerm

KakaoTalk

[bpasero]

I am trying to reproduce the behaviour but for me VS Code (1.79.x) seems to show the same border color, irrespective if my macOS theme is set to dark or light?

Here are my results in both OS themes:

This is with macOS ventura 13.4.1 (22F82)

[jhaemin]

That's weird. Here are what it looks like on my machine (27-inch, 4K). Are you using retina display? It looks like your screenshots are low resolutions. Maybe the antialiasing on your display makes the results look similar.

Light Mode

Dark Mode

[bpasero]

I am on a Dell U2515H with a resolution of 2560x1440.