Tutorial
Updated
Discord Transparency/Aero
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:
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 
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!
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 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!
CSS:
.app
{
}
.app:after
{
content: "";
background-image: url("https://puu.sh/uLpYS/5976e02ab7.png");
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
filter: blur(0px);
}
.guild-channels {
background: transparent;
}
.theme-dark .layers
{
background: rgba(46, 49, 54, 0.5) !important;
}
#voice-connection,
#friends,
#friends .btn,
.friends-header,
.friends-table,
.search-bar,
.guilds-wrapper,
.channels-wrap,
.channel-members,
.account,
.links,
.chat,
.messages-wrapper,
.title-wrap,
.content,
.chat-empty,
.message-group-blocked,
.private-channels,
.guild-header header,
.typing
{
background: transparent !important;
}
Last edited by Sono,
