Many cool Mac apps customizes title bar and often hides original title bar background. Electron provides titleBarStyle option to hide original titlebar, but it also hides the title label.
If you want to make the title bar transparent while leaving the native title label visible, you'll need another way.
The best benefit of the native title level is Represented File.
It's difficult to reimplement this in DOM perfectly.
I developed transparent-titlebar library, which uses Cocoa APIs to set title bars transparent while leaving title labels visible.
styleMask to show content with entire space of window.
This is how to use this library:
let win: BrowserWindow const transparentTitlebar = require('transparent-titlebar') // Setup window to use transparent titlebar transparentTitlebar.setup(win.getNativeWindowHandle()) // Set title color to red (must be called whenever the title has changed) transparentTitlebar.setColor(win.getNativeWindowHandle(), 1, 0, 0, 1)
You may need to run electron-rebuild after install.
It's hard to change the text color of the title because Cocoa does not provide any API to change it directly.
Fortunately I found a way to find NSTextField from title bar subviews and change its color: http://stackoverflow.com/a/29336473
setTitleBarColor function uses this solution. It must be called whenever after the title has changed.
It is a hack and probably you have to use it with caution.
(this is because I published this in a separate package instead of a pull request to Electron)