Revert the new desktop Discord UI (2025)

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.

if only i had the time to make a theme to revert it...
welp

this will probably be the best bet if you wanna overwrite the current ui back to the old one with a theme, though it is glitched in terms of banners and some other ui. ( https://github.com/milbits/oldcord )

I really hate the new UI. It is so terrible, everything feels out of place. They should just have a setting where if you want the old UI you can have it, we shouldn't have to jump through hoops to get it.

they litterally ignored the community

Damn, so it's not just an issue on my end.

Well, this sucks.

POV: Discord ignores the community for the 1,205,182,952,185,175,059,185,000,002nd time

discord try not to completely fucking ignore their community (IMPOSSIBLE)

im using unshittify for my current theme (found it on r/BetterDiscord) and man, it sucks.

discord just broke the add people to group dm button

well..
i tried unshittify, i didnt like the top bar, especially as the search bar became unusable so here is some css that is a bit better and also uses some code from unshittify to move your profile back to the right. You can also combine this with the Desktop Refresh Fast Follows experiment on treatment 3 to hopefully make the server list a bit more like before

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

    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% - 216px);
            }
        }

        & > 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(100% - 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];
}

@Pixel1011 Tysm! The only thing that really bothers me is this black box in the top right, but aside from that it imitates the look of the old UI really well

just happened to me too, so sad

Thank you so much. for me the server name is still clipping into the search bar name but otherwise is a pretty good stopgap until we can get something more permanent to fix it.

thanks, i've tried doing this before on Vesktop, and that worked. however, discord rolled out an update, and now the "Desktop Visual Refresh" flag got removed, so now i'm stuck on the new ui.
is there another flag or some CSS code (or anything else advanced) i could do to turn it off again?

they removed it. they are trying to force this shitty UI down our throats. I dont think they understand how much we hate it. well just keep finding new work arounds. Im using oldcord

Im a bit upset that half of my themes just dont work now lol, what can ya do

well.. i tried unshittify, i didnt like the top bar, especially as the search bar became unusable so here is some css that is a bit better and also uses some code from unshittify to move your profile back to the right. You can also combine this with the Desktop Refresh Fast Follows experiment on treatment 3 to hopefully make the server list a bit more like before

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

    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% - 216px);
            }
        }

        & > 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(100% - 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];
}

does this make the new ui little bit better and would that be all?

Discord I hope you and all your loved ones fucking die

https://gist.github.com/qyurila/f82e1b4719b156e7710d64fcd07f4c09

Anyway feel free to check out my personal QuickCSS I just updated: it reverts some and polishes some others

Anyone has a CSS snippet to make the server icons bigger?

:root {
    --guildbar-avatar-size: 48px !important;
    --blob-scale: 48;
    --guildbar-folder-size: var(--guildbar-avatar-size);
    --folder-blob-scale: var(--blob-scale);
}

The above snippet doesn't work for me, it just shifts the icons. source

original:

with the above css snippet:

Anyone has a CSS snippet to make the server icons bigger?

:root {
    --guildbar-avatar-size: 48px !important;
    --blob-scale: 48;
    --guildbar-folder-size: var(--guildbar-avatar-size);
    --folder-blob-scale: var(--blob-scale);
}

The above snippet doesn't work for me, it just shifts the icons. source

@MP3Martin You missed the most important (or the only relevant) line. Insert the following line right above the codes you posted -- or replace them with it if you're not gonna customize the icon size.

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

Also note that generally @import rules should be at the top of the CSS scripts (alongside each other - refer my QuickCSS if you're not certain) to work as intended.

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

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?

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

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.

best i got is enabling Vencord ToolBox then open Quick CSS and

@import url('https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css');
@import url('https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css');
@import url("https://scattagain.github.io/VencordStuff/css/GuildbarRevert.css");
:root {
    --guildbar-avatar-size: 48px !important;
    --blob-scale: 48;
    --guildbar-folder-size: var(--guildbar-avatar-size);
    --folder-blob-scale: var(--blob-scale);
}

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

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

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.

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.

With the CSS script, does anyone know how to widen the space between the help button and the edge of the screen?