GitHunt
ZU

zuzumi-f/Discord-11

Theme based in windows 11 new UI | Support server: https://discord.gg/PsNtzGeHuW

Discord 11

Version 4 is out!

A theme based on Windows 11's UI - by zuzumi

Special thanks to Agentseed for maintaining the theme while I wasn't here

Design

You can find all the values of Windows 11's UI here

image

Install

Third party Discord clients

UserStyle (Stylus, Stylish etc.)

Note: You need to enable CSP patching from your extension's settings, and make sure you don't have anohter extension that patches CSP. Otherwise theme won't work.

Screenshots

Dark mode

image
image

Light mode + glass effect

image
image

Customization

Third party Discord clients

Customize theme step 1
Customize theme step 2

You can write any other code at the bottom of the file

Customize theme step 3

UserStyle (Stylus)

Customize theme step 1

Compatibility

Horizontial Server List

You need to add the following CSS to the theme's CSS for it to work. Check here for how customize the CSS.

/* HSL on Top */
#app-mount .guilds_a4d4d9 [class*=expandedFolderBackground] {
    border-radius: var(--winrad2) !important;
    left: calc(var(--server-size)/2) !important;
}
#app-mount .guilds_a4d4d9 .wrapper_fd07a3 {
    height: auto !important;
    width: 0px !important;
    top: calc(-50% + 1px) !important;
    margin-left: 0px !important;
}
#app-mount .guilds_a4d4d9 [class*=pill] span {
    border-radius: 1.5px !important;
}
#app-mount .listItem_c96c45 {
    width: fit-content !important;
    margin: 0 12px 6px !important;
}
.tutorialContainer_c96c45 + .listItem_c96c45 {
    position: fixed !important;
}
#app-mount .base_a4d4d9 {
    border-left: none;
    border-top-left-radius: 0px;
}

Used Addons

zuzumi-f/Discord-11 | GitHunt