Enabling native title bar on Discord client

discord-enable-native-title-bar.md

Enabling native title bar on Discord client

• Step 1: Download 7-ZIP and the ASAR plugin from [ https://www.tc4shell.com/en/7zip/asar/ ]
• Step 2: After installing 7-ZIP create a new folder inside of its install location called Formats
• Step 3: Extract the .dll from one of the folders in the archive (x64 or 32) to the Formats folder
• Step 4: Go to C:\Users\**YourUsername**\AppData\Local\Discord\app-1.0.9007\modules\discord_desktop_core-1\discord_desktop_core (Replace **YourUsername** with your username)
• Step 5: Open the core.asar file with 7-ZIP and extract its content to a folder of your choice
• Step 6: Enter the folder and go to the app subdirectory, after that find the file called mainWindow.js or mainScreen.js and open it with a text editor of your choice
• Step 7: Go to line 419 and change frame: false to frame: true, if you can't find that text press CTRL+F and search for frame: false, it should look like the one attached in the screenshots
• Step 8: Navigate back to the main directory of the folder, press CTRL+A, right click, select 7-ZIP and click Add to Archive
• Step 9: Name the new archive core.asar and set the Compression level to 0 - Store
• Step 10: Close Discord if not already and navigate back to C:\Users\**YourUsername**\AppData\Local\Discord\app-1.0.9007\modules\discord_desktop_core-1\discord_desktop_core (Replace **YourUsername** with your username)
• Step 11: Replace the core.asar file with the newly created one

Hiding the custom title bar

• Use a client of your choice (in my case it's not a client but OpenAsar | openasar.dev)
• Paste the CSS code below inside the client's style/css editor

CSS

[class*=titleBar]{display: none!important}

do not edit the .asar file directly in notepad, you must extract it using 7z
if you edit it directly it shows the code and it seems that it should work, however it will not work and it will throw that error

i need help fixing this

i need help fixing this

Did you follow all the steps correctly? You have to unzip the core.asar file, modify mainWindow.js and then rezip it.

followed the exact steps and it still did not work

followed the exact steps and it still did not work

I'll make an updated guide soon, perhaps they changed something..

the guide still works for me, however, the maximize button is disabled....

however, the maximize button is disabled....

Figured out how to fix the maximize button
its disabled by better discord, to fix it, go to settings, and disable window transparency, then the maximize button will work

This hasn't worked for over a year... When you change frame: false to frame: true, it just doesn't do anything. No title bar appears, and when you apply the custom CSS, it just means you don't have any titlebar at all. Any chance of a fix? Somewhere else I have to add frame: true, maybe?

I've used the tutorial myself last week, still working, you're probably doing something wrong.

Add me on Discord: .sapunjara

I'll guide you :)

the CSS code seems to have changed with the latest layout update

I did some digging, and this seems to work for me along with the above steps to modify the ASAR file.
Not sure if this will work for others, but thought I'd share in case it does. Using Discord 1.0.9187:

.bar_c38106 {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  overflow: hidden !important;
}

[class^="app-"] > [class^="sidebar_"] > [class^="container_"] > div:first-child {
  display: none !important;
  height: 0 !important;
}

[class^="base_"] {
  top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

[class^="content_"] {
  margin-top: 0 !important;
}

.platform-win .layer__960e4 {
  top: -53px;
}

Edit:

Switched to BetterDiscord from OpenAsar and noticed there is an option to enable native titlebars under Window Preferences. Native titlebars seem to work without editing the core.asar file using this option for now, which means it should persist after updates:

Final result with above CSS code:

I did some digging, and this seems to work for me along with the above steps to modify the ASAR file. Not sure if this will work for others, but thought I'd share in case it does. Using Discord 1.0.9187:

.bar_c38106 {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  overflow: hidden !important;
}

[class^="app-"] > [class^="sidebar_"] > [class^="container_"] > div:first-child {
  display: none !important;
  height: 0 !important;
}

[class^="base_"] {
  top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

[class^="content_"] {
  margin-top: 0 !important;
}

.platform-win .layer__960e4 {
  top: -53px;
}

Edit:

Switched to BetterDiscord from OpenAsar and noticed there is an option to enable native titlebars under Window Preferences. Native titlebars seem to work without editing the core.asar file using this option for now, which means it should persist after updates:

Final result with above CSS code:

THANK YOU