https://github.com/zuzumi-f/Discord-11
Theme based in windows 11 new UI | Support server: https://discord.gg/PsNtzGeHuW
https://github.com/zuzumi-f/Discord-11
betterdiscord betterdiscord-theme discord discord-theme stylus stylus-theme theme
Last synced: 8 months ago
JSON representation
Theme based in windows 11 new UI | Support server: https://discord.gg/PsNtzGeHuW
- Host: GitHub
- URL: https://github.com/zuzumi-f/Discord-11
- Owner: zuzumi-f
- Created: 2021-10-02T11:58:04.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-08T14:05:42.000Z (over 1 year ago)
- Last Synced: 2024-11-02T05:32:46.568Z (about 1 year ago)
- Topics: betterdiscord, betterdiscord-theme, discord, discord-theme, stylus, stylus-theme, theme
- Language: CSS
- Homepage:
- Size: 4.59 MB
- Stars: 123
- Watchers: 4
- Forks: 119
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- WinUI-3-Apps-List - Discord-11
README
# Discord 11
### [Version 4 is out!](https://github.com/zuzumi-f/Discord-11/blob/main/Discord11.theme.css)
A theme based on Windows 11's UI - by [zuzumi](https://github.com/zuzumi-f)
Special thanks to [Agentseed](https://github.com/agent-seed) for maintaining the theme while I wasn't here
- [Discord 11](#discord-11)
- [Windows 11 UI](#design)
- [Install](#install)
- Third party Discord clients
- UserStyle (Stylus, Stylish etc.)
- [Screenshots](#screenshots)
- [Dark mode](#dark-mode-details)
- [Light mode + glass effect](#light-mode-glass-details)
- [Customization](#customization)
- [Third party Discord clients](#customization-third-party)
- [UserStyle (Stylus)](#customization-userstyle-stylus)
- [Used Addons](#used-addons)
## Design
You can find all the values of Windows 11's UI [here](https://www.figma.com/community/file/1159947337437047524)
[](https://www.figma.com/community/file/1159947337437047524)
## 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](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
## Customization
Third party Discord clients
You can write any other code at the bottom of the file
UserStyle (Stylus)
## Compatibility
### [Horizontial Server List](https://betterdiscord.app/theme/Horizontal%20Server%20List)
You need to add the following CSS to the theme's CSS for it to work. [Check here for how customize the CSS](#customization).
```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
- Fluent Icons by **[Stickfab](https://github.com/stickfab/pc-fluenticons)**
- Emoji Replace by **[DevilBro](https://github.com/mwittrien/BetterDiscordAddons/blob/master/Themes/EmojiReplace/EmojiReplace.theme.css)**
- FriendsGrid by **[CorellanStoma](https://github.com/CreArts-Community/Friends-Grid)**
- BearableInbox by **[Disease](https://github.com/maenDisease/BetterDiscordStuff/blob/main/css/bearableInbox.css)**