Transparency not working on Windows 10

[cvandal]

• [x] I am on the latest Hyper.app version
• [x] I have searched the issues of this repo and believe that this is not a duplicate

• Windows 10:
• 1.3.1:
• The issue is reproducible in vanilla Hyper.app:

Issue

I am unable to get transparency working on Hyper 1.31 on Windows 10. I have tried a few plugins, none of which worked, and changing my backgroundColor to backgroundColor: 'rgba(0,0,0,0.5)'. Is there anything else that I can try? My hyper.js is currently back to default config.

[rawnly]

Try to see this #1625

[b-bot]

+1 Please explain how to enable transparency using flags if it is possible at all. This is my favourite terminal emulator by far and I would like to keep using it but need transparency.

[rawnly]

As sad @Zx-EvM in #1625

Apparently hyper.is team did not implement support for opacity/transparent/vibrancy on Windows.

[cvandal]

If you're feeling adventurous, I have found that you can enable transparency in Hyper 1.3.1 on Windows 10 by setting frame: process.platform === 'darwin', to frame: false, and transparent: process.platform === 'darwin', to transparent: true, in C:\Users\<username>\AppData\Local\hyper\app-1.3.1\resources\app\index.js. Looks like they only wanted this to work on OSX, and probably for a good reason, so use at your own risk I guess.

[carpet92]

@cvandal thanks. it's really working

Also I want to pay attention that I did not see much difference between CPU usage before and after using this lifehack

Looks like they only wanted this to work on OSX, and probably for a good reason

IMO I think it's because hyper.is terminal was only available for OS X initially

[cvandal]

I haven't noticed an increase in CPU or MEM consumption, however after enabling transparency I have found that it certainly feels sluggish while entering commands. I can live without transparent terminal, I can't live with a slow terminal so I've reverted my changes :).

[damien122]

This is only because if you enable the transparency on windows and then use the View > Full Reload, then the hole window of hyper is completely transparent. I can live with this because I don't use this "Full Reload". I just restart the hole hyper after plugin installations. But I WANT a half transparent window ^^. BTW, thanks for the workaround @cvandal 👍

[stefanivic]

@cvandal yes, this was done because it caused issues with Windows snapping. You could not snap Hyper to the edge of the screen when transparency is enabled. This was the problem with Electron actually.

[damien122]

@stefanivic yes I also found this out today :) This is the reason why I revert the workaround back to default.

[albinekb]

Looks like it's not going to be supported 😞 https://github.com/electron/electron/issues/8532#issuecomment-300715940

[Terrabits]

I have enabled @cvandal's hack on Windows 10 without the Full Reload problem mentioned by @damien122. I do observe @stefanivic's problem with snapping.

I edited the contents of app.asar after installing from the official installer. Unfortunately that means that when the application auto-updates I lose my transparency.

Default electron has a command line flag (--enable-transparent-visuals) that does this. Hyper could implement a similar flag (maybe --transparent or --force-transparent) or add a transparent setting to config in .hyper.js.

[binarymelon]

Is the workaround no longer possible? I'm on version 1.4.8 and not able to find any of the referenced code in app.asar:index.js.

[johnRivs]

Hey, any updates on this for Hyper 2?

[PrestonII]

@johnRivs @ryanproud - apparently it's a Chromium issue, per the issue referenced by @albinekb : https://github.com/electron/electron/issues/8532#issuecomment-300715940

I don't think they (Hyper) can fix it until Chromium does so on their end...

[lucleray]

This can be solved using browserWindow.setOpacity (electron doc). It is compatible with Windows and MacOS.

I made a plugin for that : hyper-opacity 🙂

[johnRivs]

@lucleray You know what, it's not the same but it's close enough. I'm gonna check it out.

[lucleray]

@johnRivs It's true that it doesn't only set the opacity for the background 🤔

[Stanzilla]

Very nice plugin!

@chabou do we want to keep this as a feature request? Should probably have feature parity across all OS and we have vibrancy out of the box for macOS.

[kuttor]

@lucleray THANK YOU so much, this is absolutely amazing -- however, quick question, I can not get BLUR or Vibracvy to work.... just transparency. Is that possible. OMG, I that is possible, then This terminal is absolutely what I been hoping for.

[chabou]

@Stanzilla If I remember correctly, opacity was not a core feature due to some bug with mouse interactions. I'll try to find concerned issues.

[chabou]

@Stanzilla @lucleray This is the PR that disabled explicitly transparency on Windows: https://github.com/zeit/hyper/pull/1307

I don't know if this is still relevant.

[lucleray]

@chabou

According to the electron docs :

• transparent works on MacOS
• transparent will only work when DWM is enabled on Windows (which can be checked like explained here)
• transparent will not work on Linux unless it is started with --enable-transparent-visuals --disable-gpu

So, for Windows, instead of explicitly disabling transparency (https://github.com/zeit/hyper/pull/1307), it's possible to enable it if DWM is enabled.

If you think this should be part of Hyper, I can write a PR for that. Otherwise it could be left to a plugin to handle this.

[albinekb]

I think it's better suited for a plugin (for windows) as this will most likely not work 100% all the time and we need to maintain it and also check that it works every time we upgrade electron.

[pd93]

@albinekb I agree that this should be a plugin for now while it's a workaround, but if the electron issue ever gets solved conclusively, I feel it should be moved into hyper again to align with the features available on OSX.

There should also be a note somewhere in the README/docs to clarify this position, as lots of people are probably looking for this feature.

[curpin]

Has anyone got this working guys? I am using the latest 3.0.2 on Windows 10 and still not able to get this transparency working.

[TylerSeanRau]

Any update on this?

[TylerSeanRau]

I've managed to hack something together with https://www.npmjs.com/package/electron-acrylic-window

I'll post a short how-to-use for those willing to build from source in a bit

[TylerSeanRau]

I've added an MR to track the rest of the progress: https://github.com/vercel/hyper/pull/5632