Windows Aero theme for Discord

readme.md

Discord Aero theme

Very much a work in progress.

Hides the titlebar since we're using the native Windows frame & Aero; search for mainWindowOptions in %AppData%\Discord\[version]\modules\discord_desktop_core\core\app\mainScreen.js and modify like so:

  var mainWindowOptions = {
    // ... other options ...
    // backgroundColor: '#2f3136',
    backgroundColor: '#00000000', // note eight zeroes - this is an RGBA hex code
    // transparent: false,
    transparent: true,
    // frame: false,
    frame: true,
    // ... other options ...
  };```

discord-aero.css

/** remove grey backgrounds **/
.theme-light .friends-table, .theme-light .messages-wrapper, .theme-light .chat, .channels-Ie2l6A, .guilds-wrapper, .container-2lgZY8, .theme-light .layer-3QrUeG, .theme-light .layers-3iHuyZ, .theme-light .typing-2GQL18,
.theme-light .members-1998pB, .theme-light .chat>.content, .theme-light .title-3qD0b-, .container-PNkimc, .channels-Ie2l6A, #app-mount, .theme-light .chat form, .container-2Thooq, .theme-light .headerBar-UHpsPw,
.theme-light .friends-table .messages .divider:before, .theme-light .friends-table .messages .divider span, .theme-light .messages-wrapper .messages .divider:before, .theme-light .messages-wrapper .messages .divider span, .theme-light #friends
{
    background:rgba(0,0,0,0) !important;
}/** remove grey backgrounds **/
.theme-dark .friends-table, .theme-dark .messages-wrapper, .theme-dark .chat, .channels-Ie2l6A, .guilds-wrapper, .container-2lgZY8, .theme-dark .layer-3QrUeG, .theme-dark .layers-3iHuyZ, .theme-dark .typing-2GQL18,
.theme-dark .members-1998pB, .theme-dark .chat>.content, .theme-dark .title-3qD0b-, .container-PNkimc, .channels-Ie2l6A, #app-mount, .theme-dark .chat form, .container-2Thooq, .theme-dark .headerBar-UHpsPw,
.theme-dark .friends-table .messages .divider:before, .theme-dark .friends-table .messages .divider span, .theme-dark .messages-wrapper .messages .divider:before, .theme-dark .messages-wrapper .messages .divider span, .theme-dark #friends
{
    background:rgba(0,0,0,0) !important;
}

::-webkit-input-placeholder, body, button, input, select, textarea {
    font-family: Segoe UI,Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
}

/* hide titlebar */
.titleBar-AC4pGV {
  display: none !important;
}
.unread-mentions-indicator-bottom .unread-mentions-bar, .unread-mentions-indicator-top .unread-mentions-bar {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.guilds-wrapper {
  /*background-color: #ffffff !important;*/
}

/* header - command bar */

.header-2o-2hj, .titleWrapper-1l0xT9 {
  background: linear-gradient(to bottom, rgb(96,109,126), rgb(62,65,74) 50%,rgb(18,19,24),rgb(21,21,31) 95%, rgb(61,75,114));
  -webkit-box-shadow: none;
  box-shadow: none;
}

.theme-light .base-3dtUhz {
  border: 1px solid #767676;
  /*background: #fff;*/
  background: rgb(238, 243, 250);
}
.theme-dark .base-3dtUhz {
  border: 1px solid #767676;
  background: rgb(18, 18, 18);
}

.chat .content {
  /*border-left: 1px solid #767676;*/
}

.theme-light .channelName-3stJzi, .theme-light .groupDM-3qU0Ks .channelName-3stJzi, .theme-light .groupDMManaged-1GyXtq .channelName-3stJzi, .theme-light .input-autosize-input, .theme-light .input-autosize-input:focus, .theme-light .iconForeground-3y9f0B, .theme-light .title-1aVOXw {
    color: #fff;
}

.theme-light .topic-2QX7LI {
  color: inherit;
}

/* tooltips */

.tooltip {
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(228, 229, 240));
  color: #767676;
  font-size: 9pt;
  font-weight: normal;
  border: 1px solid #767676;
  border-radius: 2px;
  padding: 6px 12px;
}
.tooltip.tooltip-top:after, .tooltip.tooltip-right:after, .tooltip.tooltip-bottom:after, .tooltip.tooltip-left:after {
  display: none;
}

/* selected */
.contentSelectedText-3wUhMi {
  background: linear-gradient(to bottom, rgb(219, 234, 253), rgb(193, 220, 251));
  border: 1px solid rgb(126, 161, 205);
}
.nameSelectedText-sp_EUw, .nameSelectedVoice-1qSph5 {
  color: #767676;
}

/* hovered */
.contentHoveredText-2D9B-x, .contentHoveredVoice-3p_NEO:active, .contentSelectedVoice-1WDIBM:active {
  background: linear-gradient(to bottom, rgba(219, 234, 253, 0.6), rgba(193, 220, 251, 0.6));
  border: 1px solid rgba(126, 161, 205, 0.6);
}
.nameHoveredText-1uO31y {
  color: #767676;
}

/* inactive (invisible border) */
.contentDefaultText-3vZplL, .contentDefaultVoice-2ko43i, .contentHoveredText-2D9B-x, .contentHoveredVoice-3p_NEO, .contentLockedText-1aHuz8, .contentLockedVoice-1gx-SP, .contentMutedText-2y6aPQ, .contentMutedVoice-2lJ0UD, .contentSelectedText-3wUhMi, .contentSelectedVoice-1WDIBM, .contentUnreadText-2vNnZc, .contentUnreadVoice-1dijOt {
  border: 1px solid transparent;
}

.actionIcon-2Hi9ZG, .icon-1792kv {
  color: #767676;
  fill: #767676!important;
}

/* spinner */
@keyframes aero {
  /*100% { background-position: -864px; }*/
  100% { background-position: -576px; }
}
.spinner-inner {
  display: inline-block;
  text-indent: -9999px;
  line-height: 0;
}
.spinner-inner:after {
  text-indent:0;
  content: ' ';
  display:block;
  line-height: initial;
  /*width: 48px;
  height: 48px;*/
  width: 32px;
  height: 32px;
  display: block !important;
  /*background: url('https://owo.whats-th.is/8ec2ad.png') left center;*/
  background: url('https://owo.whats-th.is/1117ff.png') left center; /* 32x32 */
  animation: aero 0.9s steps(18) infinite;
}

Not working.

Not working.

I made this three years ago, not surprised that Discord updates have broken it since then tbh :)

Not working.

I made this three years ago, not surprised that Discord updates have broken it since then tbh :)

he, yeah.

It works on latest version

my method is:
(imported from https://gist.github.com/Soapbosnia/5ff2c69f2bdd404aa96df3a3691105dc)

1. You need 7-zip, Asar plugins, betterdiscord (https://www.tc4shell.com/en/7zip/asar/)
2. open 7-zip and go to C:\Users%username%\AppData\Local\Discord\app-1.0.9015\modules\discord_desktop_core-1\discord_desktop_core (Note: %username% is your account name [like Administrator, user]
3. open core.asar then go to app folder
4. copy mainscreen.js to temporary folder (like C:)
5. open notepad and open from copied mainscreen.js and find "frame" (in windows notepad find in page is Ctrl+F)
   
   change false to true
6. Overwrite the mainscreen.js file you edited over the core.asar file of the 7-zip you opened
7. Open discord and go to Settings>Custom CSS
8. copy this
   div[class*="titleBar-"] {
   display: none !important;
   }
   Note: make sure Live update is checked
   Enjoy!