A compilation of CSS snippets for Discord and its custom clients.
Important
Update 25.04.2024: Deprecated snippets: GuildList, MessageSection-v1. Other snippets might need additional adjustments.
| Snippet | Changes | Image |
|---|---|---|
| BetterProfiles | Improves general layout of user profiles, improving readability and visual appeal. Credits to Saltssaumure for the role pills. |  |
| BetterQuotes | Improves blockquotes styling to make it more visible and appealing. |  |
| AccentColor | Replaces the Blurple [ |
 |
| ClientColor | Replaces the Grey [ |
 |
| OtherColors | Replace other Discord colors (red, yellow, green, etc.) with Blurple [ |
 |
| ChannelSelections | Allows for more spacing for channel icons & colored unread notifiers. |  |
| ChatBubbles | Adds a chat bubble around messages. Different colours are available for normal, replying, mentioned and automod messages. |  |
| GuildBoost | Replaces the boost bar in guilds with a more appealing indicator |  |
| GuildList | Makes the guild/server list more more efficient and more appealing. |  |
| MessageSection-v2 | Aligns the "Message Section" better and hides its icons a hover menu |   |
| MessageTypes | Includes the message types & actions with the username. Currently available in English and German |  |
| TimestampBubbles | Applies a bubble styling to message timestamps |  |
| Username | Applies a bubble to usernames that abide by role color |   |
| OnekoDM | Replaces the discord logo with Oneko! |  |
| UserOptions | Replaces the profile popout with more streamlined options |  |
| UserPanel | Replaces the user panel with a customizable, more appealing version. Includes appearance changes to the Spotify media player. |  |
| ToolbarHide | Hides the toolbar at the top for a cleaner layout. |  |
| StaffTags | Applies styling to different staff tags for easier identification. |  |
| Titlebar | Changes the default Discord titlebar to a more visually appealing one. You can customize the text and background color to your liking. |   |
There are several methods to apply these snippets. The methods below are for Vencord, however other clients have similar methods.
If your client is not Vesktop, the snippets import.css might not work properly. In that case, use import-legacy.css instead.
Via Local Themes:
- Click on the folders (and possibly subsequent folders) of the snippet you want until you see the file
import.css - Download the file
import.cssfrom the folders - Open Settings > Vencord > Themes > Local Themes > Open Themes Folder
- Paste the downloaded file into the themes folder
Via Online Themes
- Click on the folders (and possibly subsequent folders) of the snippet you want until you see the file
import.css - Click on that file, then click on the Raw button
- A file will open on your browser, now copy the URL
- Open Settings > Vencord > Themes > Online Themes
- Paste the following link into Theme Links:
URL HERE - Enter or mouse-click outside the Online Themes box to apply
Via QuickCSS
- Click on the folders (and possibly subsequent folders) of the snippet you want until you see the file
import.css - Click on that file, then click on the Raw button
- A file will open on your browser, now copy the URL
- Open Settings > Vencord > Vencord > Open QuickCSS File
- Paste the following line as your first line (ahead of any other custom CSS):
@import url(URL HERE);
ant0n-0x0000 for helping out with the snippets' descriptions!
Saltssaumure, Lexia for various elements within the snippets
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent