Last active
March 26, 2025 11:26
-
-
Save Dovias/7f2a4d4cf86254e418a6adca9adb1f5f to your computer and use it in GitHub Desktop.
Hide Discord app bar on web browser (New UI)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Hide Discord App Bar | |
| // @namespace Violentmonkey Scripts | |
| // @match *://discord.com/channels/* | |
| // @grant none | |
| // @version 1.0 | |
| // @author Dovias | |
| // @source https://gist.github.com/Dovias/7f2a4d4cf86254e418a6adca9adb1f5f | |
| // @description 3/25/2025, 10:11:25 PM | |
| // ==/UserScript== | |
| const regex = new RegExp("^bar_.+$"); | |
| new MutationObserver((records, observer) => { | |
| for (record of records) { | |
| for (const element of record.addedNodes) { | |
| if (!regex.test(element.className)) continue; | |
| element.parentElement.style = "--custom-app-top-bar-height: var(--space-sm)"; | |
| element.remove(); | |
| observer.disconnect(); | |
| return; | |
| } | |
| } | |
| }).observe(document.body, { subtree: true, childList: true }); |
Better Solution (UserStyle)
Just use UserStyle manager to load this UserStyle CSS stylesheet instead. I recommend Stylus since its free and open source.
This also fixes a delay issue that persists in UserScript where it hides the app bar completely after it was loaded.
@-moz-document regexp(".+://(www\\.)?discord\\.com/channels(/.*)?") {
[class^="bar_"] {
display: none;
}
[class^="base_"] {
--custom-app-top-bar-height: var(--space-sm);
}Should also work with modded/custom discord clients with custom CSS support
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Before:
After:
Add this script to userscript manager browser extension of your choice. I recommend ViolentMonkey since its free and open source.
Kinda hacky way to do this, since Discord loads elements dynamically, but I don't have enough motivation to do proper research on where to hook in order to properly hide this bar. It works perfectly fine, though.