👋 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.

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.

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

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)

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

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).

Built-in About this Mac:

It's not pure white like in Electron.

@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.

Any update on this? @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.

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

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

Even a transparent window displays the white border 😞

In this case a fullscreen transparent window.

Really frustrating. They have to make an option to disable it.
On Tue, 25 Sep 2018 at 2:04 Rodrigo Díaz notifications@github.com 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
https://github.com/electron/electron/issues/13164#issuecomment-424153643,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXyHVF7TC99trs7UGKHDJLrzwCg7kdCSks5ueWUOgaJpZM4Ub1At
.

Experiencing this as well.

Yes this issue is happening on both dark and light mode

Please,

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

Did the official release of Mojave fix the issue?

I am still seeing it with VSCode (https://github.com/Microsoft/vscode/issues/54838)

Did the official release of Mojave fix the issue?

nope

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.

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.

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

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.

I have a border in frame + transparent

@bkeating
Your electron apps should be fine. Mac doesn’t do anything special when rendering applications in Mojave compared to before. Apps have the ability to check whether dark mode is enabled, but Mac OS renders apps just like before (except for the border issue discussed here and some irrelevant text rendering changes).

It seems that the white line issue is from the OS side. Not just Electron apps.
Although it would be handy to have an option to hide the white line on the title bar on the Electron side. Alternatively, it could be hidden as default when doing frameless or hidden title bar.

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

After all, this is an unofficial temporary solution.
And don't use it on light color apps.😂

I'm not using dark mode and am still getting the issue in Electron apps (Wavebox and Atom). Neither are using the system title bar.

I regret upgrading. That white line is so irritating.

Same issue here:

😥

I have this issue too, doesn't matter if OSX is in dark or light mode tho: Looks pretty bad on my app too - not as bad as it does on menu bar apps like @evilrabbit

NSRequiresAquaSystemAppearance does not seem to work at all. The hairline at the top is visible in both dark and light modes. hasShadow = false does not remedy this either 😢

I have it in my Chrome too. (I'm using a dark theme, but the white border looks identical to what I see in VS Code, Hyper, Now, There, Notion)

Notion, Hyper:

I don't think that this is an Electron/MacOS issue, I think it might be a Chromium issue.
The only non-Electron app that has this issue is Chrome, and that is what leads me to that conclusion.
To make things clear, MacOS Mojave does add a light line to the window, but its lighter than the one that we see in the current electron/chrome apps, and it changes depending on the position of the window. So the closer it is to the top the lighter it gets, but it does look better than the current one.

@morajabi @samuelgozi I don't think that it is a Chromium nor Electron side issue. You can see the same white line issue happening on native apps as well such as TextEdit, Terminal, etc.

The white line is not the issue, it’s by design in Mojave. The issue is that transparent window has it rendered in the wrong place (unlike shadow).

@vanejung It's quite different than native ones, compare them side by side, it's lighter in Chrome and that makes it more annoying. (@pronebird is referring to another serious issue too, I agree)

Compared side-by-side:

I tested it various times with color pickers and different positions, the line is there by design, but in chromium apps(electron apps and chrome) the line is way lighter, in other apps the line is darker and changes based on the position of the window, so the higher the window the lighter the line, but its never as light as in chromium apps.

That's why I think its a chromium issue. If chrome had a darker or no line like the native apps, that would be a big hint that it's an electron problem, but for now, im pretty sure its a chromium problem.

@morajabi @samuelgozi Noticed that non-Electron apps such as Sketch and Affinity Photo have the identical prominent white line issue along with Chrome. Again, this seems to be an OS side problem, not just Chromium. By the way, oddly, some other apps such as Finder, TextEdit and Spark have a different window frame treatment. Maybe there are frame options or modes for developers to choose? That I'm not too sure.

Comparison - Sketch & Chrome

Does anyone experience a performance improvement or any significant change that makes him wanna stay?

I'm actually considering degrading to HS cause of this unbearable white border

I've reported this bug to Apple, I suggest you'd do the same to get their attention (because these borders are just horrendous), https://www.apple.com/feedback/macos.html

@MAPESO Are you sure Sketch and Affinity are in Electron or Chromium? Given the size of the application it's a bit unbelievable but please do share if you have evidence?

hello i wont to subscrie

Sent from Mailspring (https://link.getmailspring.com/link/[email protected]/0?redirect=https%3A%2F%2Fgetmailspring.com%2F&recipient=cmVwbHkrMDIwNmY0OTQzOWQyYTI4MDI3NzRiM2UwZWQ0MTg2NTc4MWM1OGM5MjY0ZDY1NTZmOTJjZjAwMDAwMDAxMTdjZWYxMGQ5MmExNjljZTEzYTY3M2NmQHJlcGx5LmdpdGh1Yi5jb20%3D), the best free email app for work
On oct. 5 2018, at 11:29 am, Mohammad Rajabifard notifications@github.com wrote:
>

@MAPESO (https://link.getmailspring.com/link/[email protected]/1?redirect=https%3A%2F%2Fgithub.com%2FMAPESO&recipient=cmVwbHkrMDIwNmY0OTQzOWQyYTI4MDI3NzRiM2UwZWQ0MTg2NTc4MWM1OGM5MjY0ZDY1NTZmOTJjZjAwMDAwMDAxMTdjZWYxMGQ5MmExNjljZTEzYTY3M2NmQHJlcGx5LmdpdGh1Yi5jb20%3D) Are you sure Sketch and Affinity are in Electron or Chromium? Given the size of the application it's a bit unbelievable but please do share if you have evidence?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub (https://link.getmailspring.com/link/[email protected]/2?redirect=https%3A%2F%2Fgithub.com%2Felectron%2Felectron%2Fissues%2F13164%23issuecomment-427302221&recipient=cmVwbHkrMDIwNmY0OTQzOWQyYTI4MDI3NzRiM2UwZWQ0MTg2NTc4MWM1OGM5MjY0ZDY1NTZmOTJjZjAwMDAwMDAxMTdjZWYxMGQ5MmExNjljZTEzYTY3M2NmQHJlcGx5LmdpdGh1Yi5jb20%3D), or mute the thread (https://link.getmailspring.com/link/[email protected]/3?redirect=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAgb0lFVYdI4MQSeuMN86_SZfV-5R6tCcks5uhyaNgaJpZM4Ub1At&recipient=cmVwbHkrMDIwNmY0OTQzOWQyYTI4MDI3NzRiM2UwZWQ0MTg2NTc4MWM1OGM5MjY0ZDY1NTZmOTJjZjAwMDAwMDAxMTdjZWYxMGQ5MmExNjljZTEzYTY3M2NmQHJlcGx5LmdpdGh1Yi5jb20%3D).

@MAPESO @morajabi sketch is a native app

To summarize the thread, it's definitely a "bug" and not intended to be in Mojave dark mode.

Where is the bug, we're not sure:

• it might be Chromium only (probably not)
• A macOS native thing, that Chromium got it wrong (causing all Electron apps to have it) alongside with couple other native apps like Sketch or Affinity.
  If they identify the issue, we'll get rid of this terrible border.

hello i wont to subscrie

@Scotttresor As long as it's not to T-Series then you have my permission.

@morajabi @hemlok I just checked the information. I was wrong, I'm sorry for the confusion. Sketch is a native app ❤️

@morajabi We could say that it is a problem Chromium and macOS Mojave

This is very ugly. Recognized it on day one when using VS Code, Hyper.

Reported this to Apple as well, the line is okay on macOS apps such as Finder, but it's really annoying on third party apps such as Chrome, VSCode, etc.

Happens on other apps such as WhatsApp or Spotify too, which are not Electron Apps.

@itsandreramon Spotify uses Chromium, for that reason they are experiencing the same problem as the electron applications.

https://www.quora.com/How-is-JavaScript-used-within-the-Spotify-desktop-application-Is-it-packaged-up-and-run-locally-only-retrieving-the-assets-as-and-when-needed-What-JavaScript-VM-is-used

@itsandreramon I'm pretty sure the WhatsApp desktop app is an Electron app.

Oh okay, did not knew that. Affects a lot of apps then.. bummer.

You can find a list of apps made with Electron here

This is going nowhere.
We need someone that is involved with the Chromium project to help us find out if this is a problem with how Chromium handles windows(maybe it's not using the updated API right) or with the OS.

Since I've already filed bug reports to apple(around 2 months before the release) and nothing happened, we might need to file them to Chromium too.

Here is a link for filing bug reports on Chromium: https://crbug.com/wizard
And here are the "Bug Reporting Guidelines for the Mac & Linux builds": https://www.chromium.org/for-testers/bug-reporting-guidlines-for-the-mac-linux-builds

I strongly believe that this is an issue with Chromium because you can clearly see that there is a difference between native apps and Electron ones, and that leads me to believe that maybe the native ones use the window API differently.

Please report the bug if you have time.

Happens on NordVPN too, which is not a Chromium application.

This may just be an overall let down of how dark mode is. I personally expected something ‘flatter’; without the shiny edging. Something more along the lines of atom and it’s One Dark (and many others). Likely why we all noticed.

Another place this really grinds my gears: the striped finder in list mode. Way too much contrast.

Then I realize, Apple probably picked their dark mode colors and details based on accessibility-approved balance. So now I feel like a dick for complaining. I just basically wanted One Dark for all the things.

This is good tho, that dark mode is lame. We still get the bit (light/dark) to hook into and means apps still may want to take it and own it themselves.

Dark mode is dark art.

@bkeating I agree it feels like it needs more work, however, I don't believe that they took into account too much the accessibility issues, what leads me to think so is that there are settings for this in the preferences, settings specifically for contrast.

@NordVPN You are right, NordVPN doesn't seem to be an electron app, but that doesn't mean that there is no issue chromium, they probably don't take advantage of dark mode(same as chromium).

I created an empty Application with Xcode and tried some settings. As you can see it's always on and has nothing to do with native or not native.

• Disabling shadows removes the borders (except the top one).
  
  
  
  • Applying a background color does change the border color. Black is almost invisible compared to Electron default one (see below)
  
  

I didn't see any other settings while looking at Apple AppKit API.

Code:

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet weak var window: NSWindow!

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        window.hasShadow = false
        window.titlebarAppearsTransparent = true
        window.titleVisibility = .hidden
        window.backgroundColor = NSColor.black
    }

    func applicationWillTerminate(_ aNotification: Notification) {}

}

Different settings:

Black bg vs Electron app:

Thanks for settling that @oomathias!

I guess that means that dark mode support in electron for any transparent applications, like @evilrabbit or @gavJackson posted, is going to be a problem 😟

@hemlok A transparent window looks like this 😞

@oomathias I have sent a PR that removes the white line for frameless windows. https://github.com/electron/electron/pull/15012

@pronebird Nice! I'm glad that you found and fixed the problem for transparent windows. I'm not experienced with Apple native app, I just wanted to confirm that it is indeed by design.

It is fixed in VS Code Insiders, not yet in the stable release.
Top, stable with white border issue. Bottom Insiders which is normal OS line, it's way better.

@morajabi That might be my dark mode PR to vscode being released to insiders, @bpasero has that gone out to insiders now?

@MarshallOfSound yes now it did

@MarshallOfSound I suppose the PR in question is this one: https://github.com/Microsoft/vscode/pull/59742

Maybe based on this original work: https://github.com/electron/electron/pull/14755

I wonder how other already-dark-by-default apps have fared with the move to system-level dark mode support.

Not well at all. I'm seeing lines across every non-apple dark mode app.

I was so excited for system-wide dark mode that I went against my better judgement and upgraded. This dedicated dark mode actually made my dark mode experience worse than before when I was just re-skinning electron apps.

There's a workaround for this issue, see:

https://github.com/zeit/hyper/issues/3259#issuecomment-431272678

@lehni this was already mentioned further up in this thread, and does not fix the issue completely: https://github.com/electron/electron/issues/13164#issuecomment-424309847

Hope this gets fixed asap, it's so annoying...

This fix is only for normal users who are looking for convenience and not a fix for the reported issue.
It will give Mojave a more similar look to High Sierra where only menubar and dock are dark.

1. Switch to Light mode from Preferences -> General
2. Enter this command into terminal
   defaults write -g NSRequiresAquaSystemAppearance -bool Yes
3. Log out then then log back in.
4. Go to Preferences -> General and Switch to Dark Mode.

PS if you want to undo what you've done repeat the steps with:
defaults delete -g NSRequiresAquaSystemAppearance

@brave3d This has been recommended already and it does not work. I tested it with multiple apps, including Discord and Spotify, and the lines are still there.

https://i.imgur.com/MKGgu30.png

It's a global effect added on both light and dark modes.

@degecko I've already said that it's not a fix, It essentially switching the the UI to Light mode, and keeping the Dock and Menubar in Dark mode so It will be more like High Sierra until a better solution is available.

I have a border in frame + transparent

The same purpose :))

Any news about this?? 🤔

I believe this should be closed as it is now possible to implement everything related to Mojave Dark Mode. The following steps are needed:

• add the following to your Info.plist

<key>NSRequiresAquaSystemAppearance</key>
<false/>

• use the electron.systemPreferences methods and events related to Mojave Dark Mode like setAppLevelAppearance isDarkMode and events like systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification'...

Not working for me. With this steps, dark mode is applied but topbar shadow is still there. I have a tray application with the typical arrow pointing to it, so my menu must be hidden. Can you give us more information to achieve this? Thanks!

Any other solution?

I get this issue too.

ENV: 
electron: 4.0.0
os: mac 10.14.2, Light Mode
app: frameless and transparent window

Any solution besides running the "default...-bool no" command?

This bug can be resolved by settingtitleBarStyle: 'customButtonsOnHover', but causing another problem: titleBar will appear when hovering on it.

This bug can be resolved by settingtitleBarStyle: 'customButtonsOnHover', but causing another problem: titleBar will appear when hovering on it.

Thanks for that @vifird! But please take into account that it removes the rounded corners too. 😞

This bug can be resolved by settingtitleBarStyle: 'customButtonsOnHover', but causing another problem: titleBar will appear when hovering on it.

Thanks for that @vifird! But please take into account that it removes the rounded corners too. 😞

Yeah, then we could add rounded corners by stylesheet.

Refer to electron document

If you are using electron-packager >= 12.2.0 or electron-forge >= 6 you can set the darwinDarkModeSupport option when packaging and this key will be set for you.

If you are using electron-builder >= 20.37.0 you can set the darkModeSupport option.

Heya Folks, quick update on this, I'm going to split this bug into two categories and explain the way forward for each.

"My app has a white line at the top and it doesn't look right with my custom macOS title bar"

As mentioned above by @Pong420 you should check out our Dark Mode guide on the Electron website. In particular the darwinDarkModeSupport flags for packager/forge as that will make the "white line" less obvious and more inline with your OS color scheme when darm mode is enabled.

"My app is transparent and now it has a white line across the top and looks wrong"

Unfortunately this is currently classified by apple as a "known bug" with Mojave. I have had discussions with Apple's technical team through TSI's and they agree that the code I provided should work (and does work on <= 10.13). They have raised this internally and all we can do now is hope that they fix it in a future release of Mojave / macOS.

TLDR: Enable dark mode support for your app to make the white line look slightly better, other than that, this bug is in Apple's court now 👍

I have had discussions with Apple's technical team through TSI's and they agree that the code I provided should work (and does work on <= 10.13). They have raised this internally and all we can do now is hope that they fix it in a future release of Mojave / macOS.

@MarshallOfSound awesome, this sounds great! Will you update this thread if there is any movement from Apple's side?

This bug can be resolved by settingtitleBarStyle: 'customButtonsOnHover', but causing another problem: titleBar will appear when hovering on it.

@MarshallOfSound
Any news?
I'm pretty sure this bug can be fixed, for example provide another value of titleBarStyle property, like customButtonsOnHover but no hovering buttons.

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

@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.

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

https://github.com/electron/electron/issues/15008#issuecomment-497498135

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

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 👍

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.

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

This also existed for light mode on my MacOS.

Confirmed fixed after upgrading to Catalina.

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?

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

@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.

gotcha, thanks!

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:

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

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

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...

on Big Sur all the windows have white line

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.

@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 😄

@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.

@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...