hyper: Transparency not working on Windows 10

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

I made a plugin for that : hyper-opacity 🙂

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.

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

@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

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

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

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

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.

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.

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

Hey, any updates on this for Hyper 2?

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.

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 👍

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

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.