DiscordStyles
Discord UI Redesign breaks the theme
Describe the bug
((I just got the new Discord UI update on my client and it seemed to break a lot of the theming elements. The background broke, the alignment of the tabs broke, the circles for the servers and the home button broke due to the UI just being differently sized now. Server banners no longer fit properly as well. The name of the game that pops up in the bottom corner is now overlapped with the profile section.))
To Reproduce
((1. Use Vencord. 2. Update to the new Discord UI.))
Screenshots
((If applicable, add screenshots to help explain your problem))
Infomation (please complete the following information):
Discord channel: ((Stable/PTB/Canary))
OS: ((Windows 11))
Mod: ((Vencord))
Discord language: ((ENG))
Here is a css edit to fix i think mostly everything with the new update.
I used the linux version of vesktop to test this. Just put it in the custom css in vencord.
#channels > ul > div:nth-child(1) {padding: 17px}
.pill_e5445c.wrapper__58105 {transform: translate(-24.4pt,-24.5pt) scale(90%)!important}
.expandedFolderBackground__48112 {transform: translate(-21pt,0pt) scale(102%) !important}
.wrapper_cc5dd2 {transform: scale(110%)}
.listItem__650eb {margin-bottom: 5pt !important;}
.container__37e49 {padding-right: 13pt !important}
.wrapper_ef3116.guilds_c48ade {width: 92px !important; margin-bottom: 190pt;}
.buttons__37e49 {transform: scale(115%,85%) translateY(30pt)}
.buttons__37e49 .contents__201d5 {transform: scale(85%,115%)}
.wrapper_cc5dd2 {overflow: hidden !important}
#app-mount .stack_dbd263 {overflow: visible !important;}
.pill__1f388.wrapper__58105 {transform: translate(-24.4pt,-24.5pt) scale(110%)!important}
.listItemWrapper__91816 {transform: translate(1pt,1pt) scale(120%)!important}
That did correct a few things, thanks!
After inputting that, it looks like the following is still a bit off, not sure if it's because it's on Windows or if its because I'm on a 4K monitor:
And then background image seemingly not working. Oh and banners still not sized properly
Also, to any other people reading this who use the theme, you can disable the new Discord UI update by opting out of the 'Desktop Visual Refresh' experiment in the Experiments tab.
Obviously, this resolves all of the issues as it goes back to it's previous state.
how should I tweak this to make it compatible with the better folders plugin as well, when applying this most of the issues are fixed on the new UI but it's still a little buggy with better folders.
Discord removed the experiment workaround, so now it's just broken fully with no workaround other than manually tweaking each aspect of the CSS