[HOW-TO] Discord Transparency/Aero

Discussion in 'Computer Tutorials' started by MarcusD, Mar 16, 2017.

Mar 16, 2017
  1. MarcusD
    OP

    Member MarcusD Well-known memeber

    Joined:
    Oct 16, 2015
    Messages:
    966
    Location:
    home
    Country:
    Hungary
    I made Discord have Aero Glass on its entire window area, and it works quite good. Because there are some people who love Aero and/or plain transparency I guessed I'll share how I did it; it's quite easy.


    First of all, check if you have working graphics drivers! This is the most important step as without this it is not possible to get any kind of transparency working, and will result in a crash on launch or a black background color.

    (Linux only) get a compozitor and a WM/DM which supports compoziting! Not doing so will have no effect on the window and will simply just result in a black background.
    For example, Openbox doesn't work no matter what. KDE has a built-in compozitor, it might work out of the box.
    If you have a WM/DM which doesn't support compozitors I recommend either KDE or Emerald (if you want to have fun downgrading packages) / Beryl (if you have an ancient system and want Aero-like blur).

    Enable hardware acceleration! Not doing so will either result in a black screen or even a crash on launch preventing you from re-enabling hardware acceleration.

    Make sure you have your app.asar extracted and have a working CSS loader! You can do this by installing beautifuldiscord or BetterDiscord. If your client is unmodified then I recommend going with beautifuldiscord. Make sure to rememer/copy the installation path if this is your first time installing this!

    Navigate to your Discord appication directory (you should know this if you have installed beautifuldiscord or BetterDiscord)! Go to the "app-version/resources/app/" ("Contents/Resources/app/" on macOS) folder and open up "index.js" in a sane text/code editor (aka. don't use Notepad!). Search for "new BrowserWindow" and scroll up a little. Edit these lines accordingly:
    Code:
    transparency: true,
    backgroundColor: '#00000000',
    
    On Windows 7 you might want to also set "frame: true," for Aero! Though you can also set this on other OSes to see the effect of it :P
    On macOS you can enable blur by setting the "vibrancy" value.
    Note that setting "frame: true" on Windows with transparency enabled will make you unable to resize the window yourself! You can partially circumvent this by using the fake maximize box below the real one.

    Close and reopen Discord! If you did things right it should start up without crashing. If you have already set a custom theme then it should show up (assuming you haven't set a transparent theme yet).
    On Windows you can see if it works because there's a tiny *window* until the content starts loading, and it should have a full window Aero or transparent middle with a window frame.
    If it crashes, try again once. Something might've messed up :/ But if it crashes the second time then transparency is not supported by your graphics driver / graphics server.

    Set a transparent theme! There's a CSS hack which allows you to make your background transparent without making the window contents transparent.
    If it has a black or white background then press CTRL-R to reload the page. If it still doesn't then relaunch Discord. If it still doesn't work then try our luck with the CTRL-R trick again. If it still doesn't work then it either won't work or you need to fiddle around with the code and settings to get it work, and I can't help with that :(
    But if it worked then yay! Congratulations! We did it! \o/ Enjoy your transarency! :D


    Windows 7 with Aero

    CSS Hack
     
    Last edited by MarcusD, Mar 16, 2017
  2. TheVinAnator

    Member TheVinAnator GBATemp's Greatest Vin

    Joined:
    Jan 10, 2016
    Messages:
    3,324
    Location:
    NO COFFEI!
    Country:
    Canada
    Wow this actually looks quite good, I may use it! :P
     
  3. Joom

    Member Joom  ❤❤❤

    Joined:
    Jan 8, 2016
    Messages:
    3,300
    Country:
    United States
    Openbox (and other barebones WMs) will work if you use a third party compositor like compton or dana. There's most likely better ones out there now, though. Just check the Arch Wiki. I recommend those over something like Emerald because they hardly have the overhead that it does.
     
  4. Filo97

    Member Filo97 A Nintendo REALLY big hacking fan

    Joined:
    Oct 8, 2015
    Messages:
    3,533
    Location:
    an ancient videogame...
    Country:
    Italy
    Can you share the Firefox one too?
     
  5. MarcusD
    OP

    Member MarcusD Well-known memeber

    Joined:
    Oct 16, 2015
    Messages:
    966
    Location:
    home
    Country:
    Hungary
    You can use this in Firefox with a very small change :P Here, have this!
     
  6. Filo97

    Member Filo97 A Nintendo REALLY big hacking fan

    Joined:
    Oct 8, 2015
    Messages:
    3,533
    Location:
    an ancient videogame...
    Country:
    Italy
    Could i have help in PM on how to install it please? I am....a bit confused. mostly because i have no friggin idea on where to put the edit.
     
  7. MarcusD
    OP

    Member MarcusD Well-known memeber

    Joined:
    Oct 16, 2015
    Messages:
    966
    Location:
    home
    Country:
    Hungary
    Install Stylish, open "Add-ons" from the menu (or goto "about:addons"), select the "User Styles" tab, "Write a new style", copypaste the contents of the puush into the textbox, and above the big textbox there's a small textbox, name it something (I named it "DiscordStyle"), click "Save" and reload Discord :P

    But ye, if instructions aren't clear PM me :P

    Also, the scrollbars are weird on Firefox, that's not my fault ,_,
     
  8. Joom

    Member Joom  ❤❤❤

    Joined:
    Jan 8, 2016
    Messages:
    3,300
    Country:
    United States
    Alright, yeah, Compton is still the community standard for standalone WMs. It supports full window transparency, so stuff like Awesome, Openbox, BSPWM, Ratpoison, etc. will work. I used to use it for transparency and drop shadows when I used Linux, so I know it's tried and true, and doesn't rely on either GTK or Qt.
     
    Last edited by Joom, Mar 22, 2017
  9. Madobe Ai

    Newcomer Madobe Ai Member

    Joined:
    Jan 28, 2016
    Messages:
    40
    Location:
    Moe
    Country:
    Australia
    How to use up CPU time/10
     

Share This Page