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.

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?

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:

(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;
  }
}

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

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

.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
		);
	}
}

Here's a screenshot:

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

@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

@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

@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 :/

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 !

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.