Discord 11

Version 2.4.0 is out!

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

• Discord 11
  • Windows 11 UI
  • Install
    • Third party Discord clients
    • UserStyle (Stylus, Stylish etc.)
  • Screenshots
    • Dark mode
    • Light mode + glass effect
    • Message styles
      • Left message bubble
      • Default message bubble
      • New message bubble
  • Customization
    • Third party Discord clients
    • UserStyle (Stylus)
  • Used Addons

Design

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

Install

Third party Discord clients

• BandagedBD
  • Install from https://betterdiscord.app/theme/Discord%2011
• Goosemod, Powercord, Replugged
  • Go to Settings > Plugins > Custom CSS
  • Copy Discord11.theme.css contents and paste into the input box

UserStyle (Stylus, Stylish etc.)

• Open https://github.com/zuzumi-f/Discord-11/raw/main/Discord11.user.css
• Customize for your needs and click install

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

Light mode + glass effect

Message styles

Note: Self Messages in Right side are not working at the moment

Left message buble

Default message bubble

New message bubble

Note: Doesn't work with compact mode

Customization

Third party Discord clients

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

UserStyle (Stylus)

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-2JjMmN [class*=expandedFolderBackground] {
    border-radius: var(--winrad2) !important;
    left: calc(var(--server-size)/2) !important;
}
#app-mount .guilds-2JjMmN .wrapper-z5ab_q {
    height: auto !important;
    width: 0px !important;
    top: calc(-50% + 1px) !important;
    margin-left: 0px !important;
}
#app-mount .guilds-2JjMmN [class*=pill] span {
    border-radius: 1.5px !important;
}
#app-mount .listItem-3SmSlK {
    width: fit-content !important;
    margin: 0 12px 6px !important;
}
.tutorialContainer-2jwoiB + .listItem-3SmSlK {
    position: fixed !important;
}
#app-mount .base-2jDfDU {
    border-left: none;
    border-top-left-radius: 0px;
}

Used Addons

• Fluent Icons by Stickfab

• Emoji Replace by DevilBro

• FriendsGrid by CorellanStoma

• BearableInbox by Disease