Skip to content

Instantly share code, notes, and snippets.

@n1d3v

n1d3v/guide.txt

Last active June 7, 2025 01:08
Show Gist options
  • Save n1d3v/0a856d98b9adda5dda96c0deae32b4f3 to your computer and use it in GitHub Desktop.
Save n1d3v/0a856d98b9adda5dda96c0deae32b4f3 to your computer and use it in GitHub Desktop.
Download ZIP
Revert the new desktop Discord UI (2025)
Raw
guide.txt
So, you've probably gotten the new desktop client's UI if you're reading this and wondering how to revert the UI back to the classic look of Discord.
This is pretty easy if followed properly, For context, this new UI is called the "Desktop Visual Refresh" and was experimented with by Discord from May 2024.
Anyway, back to the actual guide.
1. Download Vencord's installer from https://vencord.dev (This is the only official Vencord link!)
2. Open the installer, install Vencord (It should show your Discord install path)
3. Once installed, relaunch your Discord client and go to settings, you should see a "Vencord" category.
4. Go to plugins, search for the plugin called "Experiments" and restart the Discord client.
5. Go back to settings, scroll down in the menu and you should see alot of new options in the category "Developer Only"
6. Go to Experiments and search for "Desktop Visual Refresh" then click on it and set it to "Not Eligible"
7. Enjoy it while it still lasts!
If you want to fix up the UI (padding, scaling, etc.) you can use this CSS listed here: https://gist.github.com/n1d3v/0a856d98b9adda5dda96c0deae32b4f3?permalink_comment_id=5519959#gistcomment-5519959 (Not mine, thank you qyurila)
If you don't know how to import it, you can follow these steps:
1. Open Discord settings, go to the "Vencord" category and click the "Vencord" option.
2. Click "Edit QuickCSS" and paste the code in
3. Exit the QuickCSS window and your done! Discord should be looking mostly normal again.
@barnxy1210
Copy link

This is obviously a shitty job discord is doing by literally forcing us to switch to this new ui which has similarities to hot trash, but is it a case of Discord actually removing the experiment or is Discord slowly making the app harder to use on the old ui?

@MP3Martin
Copy link

@qyurila thanks, that did it. I was using that one @import at the end of the custom CSS file instead of start

@Maceika
Copy link

Maceika commented Apr 15, 2025

is anyone gonna polish up oldcord or make a better version? there is no way im sticking with this horrible UI. thanks in advance. for now, the only thing that keeps the UI from being absolute dogshit is @qyurila 's QuickCSS.

@Tulugaak
Copy link

set "width: calc(100% - 216px);" to width: "calc(100% - 75px);" to remove the black box. It worked for me.

works for me too, thanks. also, just so everyone knows, it's the one under div.base_c48ade, not the one at the top under .visual-refresh, keep that one at 216 pixels

@Daved27hundred
Copy link

there has to be a way to revert to an older version of discord and bring back the desktop visual refresh option in experiments.

@Daved27hundred
Copy link

https://www.reddit.com/r/BetterDiscord/comments/1jzic8i/new_discord_ui_revert_using_oldcord_guide/ found this reddit post that helped make a new theme.

@rushiiMachine
Copy link

there has to be a way to revert to an older version of discord and bring back the desktop visual refresh option in experiments.

This would be a temporary solution and could potentially pose a risk to your account in the long term. The old UI is truly dead, but themes can still mimic it with enough effort.

@Tulugaak
Copy link

Tulugaak commented Apr 15, 2025 •
edited
Loading

With the CSS script, does anyone know how to widen the space between the help button and the edge of the screen?
2025-04-15_15-21

@n1d3v
Copy link
Author

n1d3v commented Apr 16, 2025 •
edited
Loading

Yep, Discord has removed the experiment sadly. They never listen to their users, it's only to make the private investors happy. I made some personal fixes for the client which makes it slightly more usable for me. I'm not great with CSS so it might be awful, but it does work.

It looks like this for anyone curious:
image

(Edit: Fixed typing indicators)

@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");

/* Taken from https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css */
/* Fix for user modal rescaling */
.button__201d5 {
	padding: unset !important;
}

.visual-refresh .panels_c48ade {
	right: var(--space-xs) !important;
	left: auto;
	bottom: var(--space-xs);
	width: calc(100% - var(--space-xs) * 2 - var(--custom-guild-list-width));
}

.visual-refresh .guilds_c48ade {
	margin-bottom: 0;
}

.channelTextArea_f75fb0   {
	margin-bottom: var(--space-xs);
	.inner__74017 {
		--custom-channel-textarea-text-area-max-height: 56px;
		--custom-channel-textarea-text-area-height: var(
			--custom-channel-textarea-text-area-max-height
		);
	}
}

/* Fixes for the native titlebar (Remove this if you don't use it) */
.title_c38106 {
    align-items: center;
    justify-content: left;
    padding-left: 16px;
}

.trailing_c38106 {
    padding-right: 16px;
    gap: 3px !important;
}

.winButtons_c38106 {
    display: none;
}

/* Removes the "Play Again" section in Direct Messages */
.container__675e5 {
    display: none;
}

.sectionDivider__35e86 {
    display: none;
}

.privateChannelsHeaderContainer__99e7c {
    margin-top: 6px;
}

/* Fixes the off padding on the message box */
.uploadInput__0923f {
    padding-left: 16px;
}

/* This removes the app launcher button in the chat bar */
.channelAppLauncher_e6e74f, .buttonContainer_e6e74f, .app-launcher-entrypoint {
    display: none;
}

/* This fixes the typing indicators clipping through the message box */
.typing_b88801 {
	margin-bottom: 12px;
	margin-left: 8px;
}

.form_f75fb0:has(.typing_b88801) {
  .channelTextArea_f75fb0 {
	padding-bottom: 16px;
  }
}

@Tulugaak
Copy link

Tulugaak commented Apr 16, 2025 •
edited
Loading

For those of you who don't want the ugly thick titlebar at the top of the screen and also want the server messages box to be aligned with your profile box, I've modified Pixel1011's script with some of the code from n1d3v's script.

.visual-refresh {
    div.subtitleContainer_f75fb0,
    main.container__133bf section.container__9293f {
        width: calc(100% - 216px);
    }

    div.page_c48ade {
        &:not(:has(> div.chat_f75fb0)) {
            anchor-name: --vr-header-snippet;
        }

        & > div.chat_f75fb0 {
            anchor-name: --vr-header-snippet;
        }
    }

    div.base_c48ade {
        grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end];

        &:has(div.bar_c38106 > div.trailing_c38106 > *:nth-child(3)) {
            & div.subtitleContainer_f75fb0,
            & main.container__133bf section.container__9293f {
                width: calc(100% - 75px);
            }
        }

        & > div.bar_c38106 {
            position: absolute;
            position-anchor: --vr-header-snippet;
            top: 0;
            right: anchor(right);
            width: anchor-size(width);
            padding: 0;
        }

        & div.trailing_c38106 {
            background: var(--background-base-lower);
            border: none;
            border-bottom: 1px solid var(--border-subtle);
            height: var(--custom-channel-header-height);
        }
    }

    :not(:has(div.page_c48ade > div.chat_f75fb0)) div.base_c48ade > div.bar_c38106 {
        right: 0 !important;
    }

    ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 {
        margin-top: 16px;
    }

    div.topic__6ec1a {
        -webkit-app-region: no-drag;
    }
}
.visual-refresh .panels_c48ade {
	right: var(--space-xs) !important;
	left: auto;
	bottom: var(--space-xs);
    width: calc(119% - var(--space-xs) * 2 - var(--custom-guild-list-width));
}

/* from https://github.com/MaiRiosIPla/unshittify-discord to move profile container :3  */

.visual-refresh .guilds_c48ade {
	margin-bottom: 0;
}
.visual-refresh .base_c48ade {
	grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [end];
}

@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
.trailing_c38106 {
    padding-right: 0px;
    gap: 3px !important;
}

.channelTextArea_f75fb0   {
	margin-bottom: var(--space-xs);
	.inner__74017 {
		--custom-channel-textarea-text-area-max-height: 60px;
		--custom-channel-textarea-text-area-height: var(
			--custom-channel-textarea-text-area-max-height
		);
	}
}

/* Hide Nitro gift button */
button[aria-label="Send a gift"] {
    display: none;
}
/* Hide apps button, language dependent*/
button[aria-label="Apps"] {
    display: none;
}

Here's a screenshot:
Screenshot_20250415_221053

In my opinion, this is as close to the old UI as we'll ever get.

16 May 2025 edit: Discord seems to have tweaked the default window theme a bit, so I've modified this script accordingly.

29 May 2025 edit: I've made some more slight changes to fix the new UI. The chances of us getting the old UI back now are next to zero, so we might as well just make the best of it. I've also extended the profile box all the way to the edge of the window. Set "width: calc(119% - var(--space-xs) * 2 - var(--custom-guild-list-width));" under .visual-refresh .panels_c48ade back to 100% to undo this.

6 June 2025 edit: I've added some more code to remove some of the unneeded buttons from the chat box, at least for those who use Discord in English.

@n0cturnal0709
Copy link

@Tulugaak I used the above code and for me there is still a "ghost" of the server logo and name towards the top is there something i missed in the above code as i dont see it in your presented screenshot but here is what mine looks like
image

@Tulugaak
Copy link

Tulugaak commented Apr 16, 2025 •
edited
Loading

@n0cturnal0709 from the looks of it, it could just be a broken window theme (the theme which controls the three buttons in the top right) that hasn't been updated yet, try switching back to the default one and seeing what happens

@n0cturnal0709
Copy link

@Tulugaak That worked Thank you so much! hope i can find a new theme that was close to that one though. Really irritating that it breaks almost all themes that were present before :/

@Meekiavelique
Copy link

https://github.com/Meekiavelique/revert_visual_refresh

I made a similar theme that is trying to be close to the old one, contribute if you can !

@n1d3v
Copy link
Author

n1d3v commented Apr 16, 2025

In my opinion, this is as close to the old UI as we'll ever get.

I'm sure someone will at some point recreate the old UI, I could try at some point, but I'm not great with this stuff. If I attempt anything I'll post it here.

@aniam0n
Copy link

aniam0n commented Apr 16, 2025

Fuck discord, literally unusable. Also return russian voice servers

@Pansaad
Copy link

Pansaad commented Apr 17, 2025

I cant find "Desktop visual refresh" in experiments anymore?? My discord was with the old UI by doing this before but I don't know why today it's just disappeared.

@Meekiavelique
Copy link

I cant find "Desktop visual refresh" in experiments anymore?? My discord was with the old UI by doing this before but I don't know why today it's just disappeared.

They removed it

@Pansaad
Copy link

Pansaad commented Apr 17, 2025

Why did they remove it!?!?!?

@luxlia
Copy link

luxlia commented Apr 17, 2025

F

@Jack74593
Copy link

whelp

@pizza-beep
Copy link

https://github.com/milbits/oldcord is near perfect

@OtterCodes101
Copy link

random guy i know appearance

@pizza-beep
Copy link

random guy i know appearance

yo wassup leah

@kaxonomy
Copy link

https://github.com/milbits/oldcord is near perfect

this is ancient discord not pre 2025 refresh discord

@IsNotDio
Copy link

https://github.com/milbits/oldcord is near perfect

this is ancient discord not pre 2025 refresh discord

It's passable. 🔥

@truenachtara
Copy link

https://github.com/Meekiavelique/revert_visual_refresh

I made a similar theme that is trying to be close to the old one, contribute if you can !

What about making non-selected servers have a circle icon instead of a square? I can't tell what server I'm on easily.

@Meekiavelique
Copy link

https://github.com/Meekiavelique/revert_visual_refresh
I made a similar theme that is trying to be close to the old one, contribute if you can !

What about making non-selected servers have a circle icon instead of a square? I can't tell what server I'm on easily.

I can try to

@kaz8485
Copy link

kaz8485 commented May 30, 2025

had anyone tried to make CSS code specifically for the voice/video buttons to revert them to look more like the old UI look?

cause i hate that i have to keep going into the voice channel to use something like the soundboard

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment