Vibrancy (fixes #5)

[Eugeny]

No description provided.

[DRSDavidSoft]

Is Vibrancy working at the moment? If so, could you please add an a screenshot?

[Eugeny]

Yes, but not in the released builds yet. Vibrancy is available for macOS and transparency is available for macOS & Windows.

I'm working on getting vibrancy on Windows and transparency on Linux at the moment.

Vibrancy:

Transparency:

[DRSDavidSoft]

Nice. If you could make it look like this on macOS, it'd be awesome!

[Eugeny]

It does look this way with an appropriate wallpaper and background tint disabled:

I've left some background tint in, because a lot of bright wallpapers make the terminal text unreadable without it. But it's all configurable with user CSS of course

[Eugeny]

With the tint fully disabled:

[DRSDavidSoft]

@Eugeny This is amazing! Wish the same effect could be achieved on Windows. Can you take a look at 23phy/electron-acrylic? here's a sample.

[Eugeny]

Currently looking at https://github.com/arkenthera/electron-vibrancy as it seems to be more stable

[DRSDavidSoft]

@Eugeny Awesome. Should Windows' "blur-behind" be in a new issue instead of this one?

[Eugeny]

I'll be pushing windows vibrancy support into master soon

[DRSDavidSoft]

@Eugeny This is so cool! ❤️ I wish it could get more blurred, so we could achieve the same effect as running on macOS

[sylveon]

I don't like the electron-vibrancy package because it forces you to disable shadows on Windows and it makes the window look weird.

[sylveon]

My PR to vscode for the effect does have a more intense blur on Windows: microsoft/vscode#52707

[Eugeny]

@sylveon does your solution also work with window snapping? (win key + arrows)?

[sylveon]

Yes, you can see me playing with them here https://www.youtube.com/watch?v=K2qw0fKGE60

[smlombardi]

I've seen multiple posts on this for months, anyone have any idea if it will ever see the light of day?

[Eugeny]

@smlombardi it's long released, were now talking about an alternative implementation by @sylveon

[smlombardi]

@Eugeny I can use this in my themes for Insiders now?
Are there docs for us theme authors as to how to integrate transparency in our themes?

[Eugeny]

@smlombardi all you need is to have a transparent background-color on the body. If vibrancy is enabled by the user, it will have the .vibrant class.

[smlombardi]

So how does one enable vibrancy?

If vibrancy is enabled by the user

[Eugeny]

@sylveon now in master - thank you so much!

[Eugeny]

@smlombardi Settings -> Appearance -> Vibrancy

[sylveon]

Awesome! A few tips tho:

• As I've noted in the configuration option on vscode, the fluent appearance is really buggy at times (video, I've made the editor background fully transparent to highlight it better) so not sure if you want to ship that as default, an optional setting to enable it or making the vibrancy a dropdown with different appearances is probably better. It's nothing your app can fix, it's something in DWM.
• macOS doesn't needs electron-vibrancy anymore, as electron natively supports it. See the vibrancy property of the browser window create options, as well as window.setVibrancy
• On Linux, it's also possible to do, if you can afford the loss of hardware accelerated rendering (which a small app like Terminus should be fine with, after all vscode without hardware acceleration works well on my lower end laptop). Note that in this case, you can only enable transparency and it's up to the user's compositor to render the blur effect.