-
-
Save cheesits456/41d659f932b5a574b5dfb9b391a4506e to your computer and use it in GitHub Desktop.
If anyone's looking for an up to date theme or CSS code for the newest discord UI updates, I made my own. :::}
https://gist.github.com/OrieDargon/220ec8eee4bd6ae1da043ca6f3f0cf9d
/*You may remove or comment out any bit of code you want, if you would prefer to have certain buttons.*/
/*The code below removes the Sticker Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open sticker picker"] {
display: none;
}
/*The code below removes the GIF Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open GIF picker"] {
display: none;
}
/*The code below removes the Nitro Gift button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Send a gift"] {
display: none;
}
/*The code below removes the "Apps" button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Apps"] {
display: none;
}
/*The code below removes the "Apps" button in the bottom left user area, when in a voice call. You can also still access this if needed if you click into the voice call.*/
[class$="actionButtons"] button:nth-child(5) {
display: none;
}
I updated them and and tweaked some for better UI experience and so they won't break as much
/* Hide unnecessary stuff */
/* Emoji, GIF and sticker button container (remove /* at beginning to delete all. All but main emoji button included below) */
/* [class$="buttons"] .expression-picker-chat-input-button:not(div[class*="vc-chatbar-button"]),
/* Sticker button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([class*="stickerButton"]),
/* GIF button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([aria-label="Open GIF picker"]),
/* Gift button in chat + removes empty space */
[class$="-container"]:has(> [aria-label="Send a gift"]),
/* All Gift buttons like shop, etc (leaves empty space in chat) */
/* [class$="buttons"] [aria-label="Send a gift"],
/* Vencord Stickers+ button */
/* div:has(> button > svg.vc-more-stickers-icon),
/* Server tags */
[class*="chipletContainer"],
/* App launcher button */
[class$="buttons"] .app-launcher-entrypoint,
/* Apps in VC (participants/screenshare screen) + removes empty space */
[class*="buttonContainer"]:has([aria-label*="Start an Activity"]),
/* Apps in VC (user panel) */
button:has(svg[viewBox="0 0 96 96"]),
button:has(path[d*="-6.554999828338623"]),
/* Nitro Home/upsell box */
[class*="upsell"],
/* Activities */
[href="/activities"],
/* Big library button */
[href="/library"],
/* Big store button */
[href="/store"],
/* Big shop button */
[href="/shop"],
/* Big quest/mission button */
[href="/quest-home"],
/* Discovery button in server list */
[class*="tutorialContainer"] + [class*="listItem"],
/* Events list in server */
[class^="containerDefault_"]:has([data-list-item-id^="channels___upcoming-events"]),
/* Events in server */
li:has([aria-label="Events"]),
/* Server Boosts in server */
li:has([aria-label="Server Boosts"])
{
display: none !important;
pointer-events: none !important;
}
@MichaelDavidGK the aria-describedby for apps in VC would change daily about a week ago, and be inconsistent naming schemes between devices. I don't trust that code remaining consistent anymore, so I specified the "child" in the actionButtons class to display none, and it worked consistently so far
/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),
this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).
/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).
Change it to this and it should work:
[class$="-container"]:has(> [aria-label="Send a gift"]),
@MichaelDavidGK the
aria-describedbyfor apps in VC would change daily about a week ago, and be inconsistent naming schemes between devices. I don't trust that code remaining consistent anymore, so I specified the "child" in theactionButtonsclass to display none, and it worked consistently so far
@OrieDargon I see, for some reason it worked for me so far, but I changed it to:
button:has(svg[viewBox="0 0 96 96"]),
button:has(path[d*="-6.554999828338623"]),
I will see how it goes, rn both of them work separately when restarting discord and on both PTB and Canary.
@ Swedishdogs
/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).
Change it to this and it should work:
[class$="-container"]:has(> [aria-label="Send a gift"]),
@coffeeyoda thanks for this, I also changed it in mine 😉
Code is updated in my previous message
Discord have now added a different nitro gift button to the chatbar specifically for DM's, so the previous fixes don't help there.
I'm now using this (in addition to the older ones for the version of this button in servers and such), to remove the new button:
[class*=button][aria-label="Give a Gift"]
{
display: none;
}
The gift button on the chatbar no longer responds to any of the CSS above, including the most recent from Mar 6 2026. Any ideas? I'm using BetterDiscord, it still works for everything else.
If I use Ctrl+Shift+i to open the dev tools I can use the element picker, click "Edit as HTML" and type in style="display:none" -- but I'm getting tired of doing that since it keeps refreshing itself every so often and the button comes back. I suppose just the one button isn't that big of a deal, but it's the principle. :)
[edit] Found something that works for the Gift button. Mind you, I tried this multiple times, but seeing other examples of class in brackets did the trick for me. Added this to MichaelDavidGK's CSS found above:
[class="container__5287f"],
The gift button on the chatbar no longer responds to any of the CSS above, including the most recent from Mar 6 2026. Any ideas? I'm using BetterDiscord, it still works for everything else.
If I use Ctrl+Shift+i to open the dev tools I can use the element picker, click "Edit as HTML" and type in
style="display:none"-- but I'm getting tired of doing that since it keeps refreshing itself every so often and the button comes back. I suppose just the one button isn't that big of a deal, but it's the principle. :)
try:
button[aria-label="Send a gift"], div[aria-label="Send a gift"] {
display: none;
}
button[aria-label="Give a Gift"], div[aria-label="Give a Gift"] {
display: none;
}
button[aria-label="Create DM"], div[aria-label="Create DM"] {
display: none;
}
class stuff. thanks!