Mojave dark mode causes a white line at the top of Electron apps

[LoganDark]

• Electron Version: ???
• Operating System (Platform and Version): macOS 10.14 Mojave
• Last known working Electron version: ???

Expected Behavior
No white lines

Actual behavior
There is a thin white line at the top border of Discord

To Reproduce
Download Discord and run.

Screenshots

Additional Information
May be related to dark theme.

---

I am aware macOS Mojave is not exactly accessible to everyone yet, but I'm reporting this just in case.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[robjtede]

Confirming this happens in all the Electron apps I have in Mojave dark mode.

Offtopic: maybe the systemPreferences.isDarkMode() method will get some more love now. Glad to see the existing API supports this.

[zinne]

tested Mojave yesterday, also seen the line. Also the standard file open dialog appeared still in white

[ivanreese]

This happens in both dark mode and light mode. I believe it has something to do with apps that hide the title bar.

I have the issue in Atom, Hyper, and Slack.

I've also reported the issue to Apple. (Other reports might help — they tend to prioritize issues that multiple people report — so if you're encountering this, send them a bug report in the Feedback Assistant app)

[luizfonseca]

+1 Even chrome on Mojave has it, so I think this is around chromium/electron apps.

[samuelgozi]

I believe that this line is added by the OS, it is added to other apps too, however when the app doesn't use the native title bar then there is no "gradient" and it stands out more because the contrast is higher.
This line also exists in the light UI as well, but it's less disturbing because the contrast is lower.
I reported this as an "unexpected behavior" to apple but I'm not sure that they will do anything about it(unless many other people complain).

[LoganDark]

Built-in About this Mac:

It's not pure white like in Electron.

[samuelgozi]

@LoganDark It seems like you are correct, I just checked with 4 different apps, 3 of them are native, and each one of them has a different color on that line.
I checked with "settings", "safari", chrome(which has the same color) and "feedback assistant".

Edit: after taking a closer look at it, in native apps, it seems like the line gets lighter the closer it is to the top.

[glekner]

Any update on this? @ivanreese

[ivanreese]

@gilad215 It seems this is a Chrome thing? I don't know, I'm just a user of Electron apps, not a dev on any of these projects.

[jeroen-meijer]

Nothing has changed after Chrome update 69. This is still an issue.

[alihaider96]

Hope it gets resolved somehow, it's really bugging me out 😆

[rdiazv]

Even a transparent window displays the white border 😞

In this case a fullscreen transparent window.

[glekner]

Really frustrating. They have to make an option to disable it.

…

On Tue, 25 Sep 2018 at 2:04 Rodrigo Díaz ***@***.***> wrote: Even a transparent window displays the white border 😞 [image: captura de pantalla 2018-09-24 a la s 20 00 56] <https://user-images.githubusercontent.com/1670771/45983791-924aad00-c034-11e8-9034-eafd22f9ed74.png> In this case a fullscreen transparent window. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#13164 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXyHVF7TC99trs7UGKHDJLrzwCg7kdCSks5ueWUOgaJpZM4Ub1At> .

[npezza93]

Experiencing this as well.

[mettaworldjon]

Yes this issue is happening on both dark and light mode

[andylacko]

Please,

if any hack, update or something like that, let me know. Apple developers really crossed the line when creating this ugly thing 🤯

[jeroen-meijer]

Did the official release of Mojave fix the issue?

[bpasero]

I am still seeing it with VSCode (microsoft/vscode#54838)

[snoot-booper]

Did the official release of Mojave fix the issue?

nope

[SinarPandora]

Please use: defaults write -app [application name] NSRequiresAquaSystemAppearance -bool No
It works!

Cancel: defaults delete -app [application name] NSRequiresAquaSystemAppearance

This is an unofficial temporary solution.
And don't use it on light color apps.

[Neofish22]

The solution from @SinarPandora certainly does reduce the white line to a thinner grey one (which I don't remember being there before). Confirmed with Sublime\ Text and Google\ Chrome.

[karlhorky]

Edit: Yeah, @Neofish22 is right, it doesn't appear to fix the issue completely :( There is now a new dimmer line around the whole window.

If you still want to try it, [application name] is written as just the name of the application, with backslashes before spaces:

defaults write -app Visual\ Studio\ Code NSRequiresAquaSystemAppearance -bool No

[bkeating]

Keep reaching to resize my window up a pixel. Makes it feel like I can see other window content in the background.

I wonder how other already-dark-by-default apps have fared with the move to system-level dark mode support. Tricky. I don't want macOS touching my Atom electron app at all. I love it just the way it is.

[romanmarch]

I have a border in frame + transparent

[Riz-waan]

Is there anyway to test/do this while under development?

[lanistor]

@MarshallOfSound
Any news?
This bug has lasted so long. Why not make a patch on it?
We really really need a correct behavior, although it's Apple' bug.

[pronebird]

This can be fixed with the latest patch that landed in the Electron v6 beta 5

#15008 (comment)

[lanistor]

@pronebird It's cool, but don't seem like the official resolution?

[MarshallOfSound]

Hey folks, I got some good news from apple and validated it just now. The Catalina beta fixes this issue on Apple's side of things, once Catalina has rolled out as a stable release the white line no longer appears on transparent: true or frame: false windows 👍

[bkeating]

sort of a bummer; I was about to pull the trigger on making some "dark mode causes a white line at the top of electron apps" T-shirt, and have the neck collar have a subtle white line around it. booo.

... not entirely convinced this thread is dead yet. but im excited to hear the good word about Catalina.

[KevinHughes]

#18485 has been backported to Electron 5.0.3, and it fixes this issue for me (using customButtonsOnHover and the appropriate flags)! I had a feeling that a patch like this could be done... a big thank you to @codebytere, now I can start beta testing my app for real

[tvvxaop]

This also existed for light mode on my MacOS.

Confirmed fixed after upgrading to Catalina.

[nickensoul]

Catalina 10.15, seems like adds new issues – strange black (or almost) border and another lighter border (likely it was before; Developer Tools window, for example, has this frame too) appears after updating.

Dark border

Window's options list:

{
  show: false,
  darkTheme: true,
  backgroundColor: '#000000ff',
  frame: false,
  titleBarStyle: 'hiddenInset',
  vibrancy: 'dark'
}

Lighter border

Window's options list:

{
  show: false,
  center: true,
  darkTheme: true,
  resizable: false,
  maximizable: false,
  fullscreenable: false,
  frame: false,
  backgroundColor: '#1f1f1f',
  titleBarStyle: 'hiddenInset'
}

NSRequiresAquaSystemAppearance is set to true

How to just remove these chrome forever?

[bernatfortet]

@nickensoul did you figure out how to get rid of the black line?

[nickensoul]

@bernatfortet nope, just left as it is for now. I believe it requires some changes of interactions with system APIs (and I think, it's the Electron core, so would need a fork)
So, still waiting.

[bernatfortet]

gotcha, thanks!

[msavin]

The white line on top of the screen is transparent. If you can put a #000000 line beneath it, you can dim it quite a bit.

It's a bit tricky to get it to render, but adding the following to my custom title bar did the trick.

border-top: 1px solid #000000
padding-top: 1px
margin-top: -1px

The white bar came down from rgb(175,175,175) to rgb(151,151,151)

Edit: this may also require the following inside the title bar:

<div style="position: fixed; top: 0; left: 0; background: #000; height: 1px; width: 100%"></div>

[adam-lynch]

For those coming to this now, it seems to be fixed in Catalina. I just tested it on 10.15.2

[sergeyfilimonov]

For those coming to this now, it seems to be fixed in Catalina. I just tested it on 10.15.2

@adam-lynch In Atom I still see the line:
https://user-images.githubusercontent.com/43918077/67483562-bda42f00-f66e-11e9-8fb4-4590dc06822e.png

It seems Atom is using an older version of Electron...

[hologerry]

on Big Sur all the windows have white line

[robjtede]

On Big Sur, It's a black border outside an off-white border, except on Discord it currently fills in the corners too :( Hopefully a bug in the early beta.

Edit: Seen ONLY discord have this filling in behavior so far.

[MarshallOfSound]

@robjtede I haven't spun up the developer beta yet, but if that's happening with all Electron apps make sure you raise it in the feedback assistant 😄

[hologerry]

@robjtede I haven't spun up the developer beta yet, but if that's happening with all Electron apps make sure you raise it in the feedback assistant 😄

Not only the third party apps have this issue, but also all the Apple apps such as Finder, Music, Safari do.
Here is the screenshot:

I raise the issue here is to make more people aware of this Big Sur's bug, so that the Apple team could notice it and fix it.
Of course, I have raise the issue on feedback assistant and the developer forum.

Edit: Update the screenshot to make it bigger.

[novakoder]

@robjtede I haven't spun up the developer beta yet, but if that's happening with all Electron apps make sure you raise it in the feedback assistant 😄

Not only the third party apps have this issue, but also all the Apple apps such as Finder, Music, Safari do.
Here is the screenshot:

I raise the issue here is to make more people aware of this Big Sur's bug, so that the Apple team could notice it and fix it.
Of course, I have raise the issue on feedback assistant and the developer forum.

Edit: Update the screenshot to make it bigger.

Any news? It's kinda annoying seeing this white lines in every single window when in dark mode...

[hologerry]

Looks like only the Electron-based apps still have this issue on macOS Big Sur, for example, VS Code.
System apps and Chrome have fixed this issue.
If you have not noticed this issue, just download iTerm and VS Code, set dark themes for both, look at the top of the apps.

system appearance Light:

system appearance Dark:

IT IS SO ANNOYING!

[johnnyshankman]

Why was this closed? I still have this issue clear as day. By default this is an issue and this thread does not disclose a one-size-fits-all solve.

Latest Electron + Mac OS Sonoma 14.1 (23B74)

VSCode itself admits this is an issue since release 9 which is a huge bummer to see: microsoft/vscode#144389 (comment)