Alacritty: Allow changing window title bar color in macOS

[dominiklohmann]

Recent iTerm2 versions allow selecting a color for the title bar on macOS to make it blend in with the terminal background. It doesn't hide the title bar, but makes it look a lot better.

Is there any chance of getting this for alacritty? Or, can someone point me in the right direction towards implementing this myself?

This can be achieved by using the following flags on NSWindow, assuming the window background color is set accordingly (example in Swift).

window.titlebarAppearsTransparent = true
window.titleVisibility = .hidden
window.styleMask.insert(NSWindowStyleMask.fullSizeContentView)

[ghost]

this actually looks really nice

[asilvadesigns]

yes please

[tbodt]

This would be best implemented in glutin.

[metalelf0]

It would look great! It would be great to allow theme authors to specify a title_bar_color under primary namespace, and fallback to primary.background otherwise.

[dominiklohmann]

The positive feedback definitely shows that aesthetics are highly valued.

However, looking through glutin I have no idea where to start, so unless someone else has a good idea on where to apply the necessary changes this is probably put on hold.

[mcginty]

Yay aesthetics!

At first glance, it looks like glutin uses a winit library (same author), which is used for cross-platform window initialization, but winit doesn't seem to have a lot of support for providing custom NSWindow flags in macOS.

You can remove all window decorations by adding a

.with_decorations(false)

into https://github.com/jwilm/alacritty/blob/master/src/window.rs#L188, but I don't immediately see a way outside of submitting a PR to winit to do what is needed, except possibly by directly accessing the cocoa NSWindow object directory through os::macos::WindowExt.

[mcginty]

Decided to play with it a bit.

I got it partially working by modifying winit in a horribly hackish way, but even with that work would still need to be done to add automatic padding to the top, and re-enable the title by finding a way to change the font color or render our own.

EDIT: if anybody wants to play with this more and make it, like, not shit, diffs here:

https://github.com/mcginty/alacritty/commit/145aa0f82f0d9851ce9e461ac5c09831f4f8fb43
https://github.com/mcginty/winit/commit/42980aa8980c655072da3737de751eba9961bebb

I couldn't get the hackier version working (which wouldn't require changes to winit), it just crashes, but someone who knows more about FFI interaction may be able to fix that quickly for all I know.

[sodiumjoe]

FYI, I made an issue on winit.

[sodiumjoe]

FYI, looks like https://github.com/tomaka/winit/pull/389 will make this possible. Some more discussion here: https://github.com/jwilm/alacritty/pull/947#issuecomment-360457297

[sodiumjoe]

FYI, I opened a PR on winit to allow resizability on with_decorations(false) windows, but there was an objection as to whether that should be the default behavior of with_decorations(false), so I limited the scope to just adding a subclass that makes it possible: https://github.com/tomaka/winit/pull/408

Once that's merged, there will be an option to pull in cocoa and manipulate the window masks directly by calling ns::get_window(). That will allow creation of resizable windows that look like this:

Notice there are no borders, no titlebar, square corners, and no drop shadow.

There's also this open PR https://github.com/tomaka/winit/pull/389 which will allow windows that look like this:

This has a transparent titlebar with a "full size content window" meaning the titlebar will have the same color background as the content, and retains the titlebar buttons, rounded corners, and drop shadow.

There does appear to be an issue with this for non-hidpi monitors that I've noted here: https://github.com/jwilm/alacritty/pull/947#issuecomment-360908642 I'm still trying to figure out what's going on there.

I also have a PR into the above PR https://github.com/robertgzr/winit/pull/1 to allow the same as above, but also hide the titlebar buttons, to allow a window that looks like this:

This basically looks like a window with no titlebar, but retains rounded corners and drop shadow.

I'm trying to get those PRs moving. I'm not sure how we would expose those options from alacritty, though. Should we expose all of these options? Or alias decorations: false to one of these? (Current decorations: false doesn't allow any resizability, so imo is not very useful.)

[jedahan]

Providing a middle ground between configurability and ease of use - if we use the term decorations to cover borders, titlebar, corner, and shadow, I'd propose from first screenshot to last:

decorations: none
decorations: transparent
decorations: buttonless

'none' covers the fullscreen or quake-like terminal use case.
'transparent' covers floating
'buttonless' covers minimal floating

There are two use cases that I think we do not have to cover (until someone pipes up)

• buttonless without transparency
• no decorations + not resizeable (what we have now with decorations: false)

also decorations: default would just be regular old window like we have now

[sodiumjoe]

quick update, I opened a new PR so the relevant PRs that this depends on are:
https://github.com/tomaka/winit/pull/408
https://github.com/tomaka/winit/pull/423

[sodiumjoe]

@jedahan I think that's a really good summary. I agree with the options you've presented, but I'm not sure how this would work for other platforms. I'm also not sure if decorations correctly describes what this does anymore. I wonder if it would make more sense to present a new field in the config that's macos specific. Something for @jwilm and @chrisduerr to weight in on, probably.

[sodiumjoe]

https://github.com/tomaka/winit/pull/423 is merged and https://github.com/tomaka/winit/pull/408 is approved, hopefully merged very soon. I'd like to start work on a PR into alacritty to integrate those changes. @jwilm does jedehan's suggestion sound good to you for macos-specific config options?

[chrisduerr]

If a macos-specific setting is added it should probably be similar to thin_strokes where it is present in both configs but only does something in one.

This should help us with the long-term plan to merge the two default configurations together once the font configuration RFC is implemented.

[sodiumjoe]

while waiting for https://github.com/tomaka/winit/pull/408 to merge, I started an implementation of the above: https://github.com/sodiumjoe/alacritty/commit/1d20fae37f2adc9102452fc08b467ed242da0471

Any feedback would be welcome!

[sodiumjoe]

https://github.com/tomaka/winit/pull/408 has merged, we're now just waiting for a release

[wavded]

Just a heads up, looks like winit released these changes in 0.12 a few days ago: https://github.com/tomaka/winit/blob/master/CHANGELOG.md. And BTW, thanks for working on this @sodiumjoe !

[sodiumjoe]

oh nice, ok, i'll get a PR up to integrate that change into alacritty

[chrisduerr]

We might have to wait for glutin because we're not using winit directly, but if that's updated too it should be all good to go!

Thanks for putting in all that nice work on macos @sodiumjoe :)

[sodiumjoe]

Yeah, it looks like glutin is still on [email protected]. There's a PR up for updating it to @0.12 tho: https://github.com/tomaka/glutin/pull/1010

[sodiumjoe]

Ok, glutin updated and published, I've made a PR for this: #1241

[ChadTaljaardt]

Thank you @sodiumjoe

[ghost]

Thanks sodiumjoe!

as a follow up it would be nice if it was possible to not only make the titlebar transparent but also make the text start below the titelbar ❤️ as of now the history goes all the way up into the titelbar and below the buttons

[sodiumjoe]

@monouser7dig I think that should be achieved by granular padding config for top,right,bottom,left instead of just x,y. Either way it should probably be a separate issue.

[pascalw]

Indeed top-only padding would be very welcome when #686 is merged and running with decorations: transparent. Currently I need padding.y: 50 to make sure the terminal contents don't run under the window buttons, but this has the side effect of not using the bottom 50 pixels off the screen either.

[yech1990]

will this feature be supported in linux

[jedahan]

@yech1990 that would be cool, wanna open another github issue to request it, and pointers to example applications that behave like you'd want?

[elithrar]

VSCode's "custom" title bars on both macOS, Windows & Linux should be good inspiration: https://code.visualstudio.com/updates/v1_28#_custom-title-and-menu-bar-on-windows-by-default