Hide Discord app bar on web browser (New UI)

hide-discord-app-bar.js

// ==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