Discord-11

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

Screenshots

Dark mode ![image](https://github.com/zuzumi-f/Discord-11/assets/79029257/c0d5ab60-9513-4e67-a33b-98361f2a6ac2) ![image](https://github.com/zuzumi-f/Discord-11/assets/79029257/e7c9b644-8170-4b81-bddc-12cdd580df28)
Light mode + glass effect ![image](https://github.com/zuzumi-f/Discord-11/assets/79029257/ba662175-dd26-4fa6-9169-3ffc53783986) ![image](https://github.com/zuzumi-f/Discord-11/assets/79029257/56134e12-3dff-42c5-9a64-96a12031108c)

Customization

Third party Discord clients ![Customize theme step 1](https://user-images.githubusercontent.com/79029257/196771736-bf0421c8-1d16-490e-8003-6c04086224e9.png) ![Customize theme step 2](https://user-images.githubusercontent.com/79029257/196772831-6f14281e-2731-47ee-b02e-90eef7e656e1.png) You can write any other code at the bottom of the file ![Customize theme step 3](https://user-images.githubusercontent.com/79029257/185492619-98009f68-31c4-4a59-a8dc-e515d22b4363.png)
UserStyle (Stylus) ![Customize theme step 1](https://i.imgur.com/G88mLLd.png)

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