Welcome to Awesome CSS Snippets for Discord! This repository is a curated collection of CSS snippets designed to enhance your Discord experience. Whether you want to customize the appearance, improve functionality, or streamline your usage, these snippets offer a variety of solutions.
Jump down to Installing Modules for help getting started.
Below is a list of modules available in this repository:
Hide Discord's toolbar icons until you need them.
@import url("https://aushevahmad.github.io/awesome-css/modules/bartender.css");
:root {
--bartender-width: 4ch; /* Width for displayed icon. Adjust depending on your needs [Default: 4ch] */
}
If you fancy an animated version, which slides in from the left, you can use this version:
@import url("https://aushevahmad.github.io/awesome-css/modules/bartenderAnimated.css");
:root {
--bartender-width: 34px; /* Adjust this to 34-45px based on themes [Default: 34px] */
--animation-size: 21%; /* Adjust the width to show the whole section if necessary [default: 21%] */
}
note that the toolbar's width will not be consistent with all window sizes.
Replace the emoji icon in text inputs with one of your choice.
@import url("https://aushevahmad.github.io/awesome-css/modules/custom-emoji-bar.css");
:root {
--image-link: url("https://cdn.discordapp.com/emojis/1196313509525471355.webp");
}
Replace the text prompt in the chat bar.
@import url("https://aushevahmad.github.io/awesome-css/modules/custom-bar-prompt.css");
:root {
--prompt-text: "be silly :3";
}
Minor adjustments to the membercount view. This module has no effect unless the Vencord MemberCount plugin is installed.
@import url("https://aushevahmad.github.io/awesome-css/modules/vc-membercount.css");
A few changes to the channel list, to increase density.
@import url("https://aushevahmad.github.io/awesome-css/modules/channeltweaks.css");
Keep the search bar out of the way when it's not in use
@import url("https://aushevahmad.github.io/awesome-css/modules/fancySearch.css");
Block Discord Nitro/Shop/Server Boost ads.
@import url("https://aushevahmad.github.io/awesome-css/modules/adblock.css");
Better version of Adblock module that removes billing settings and profile effects.
@import url("https://aushevahmad.github.io/awesome-css/modules/adblockplus.css");
Remove useless buttons and give Discord a cleaner look.
@import url("https://aushevahmad.github.io/awesome-css/modules/declutter.css");
Better version of Declutter module that also removes ads by default. (Recommended)
@import url("https://aushevahmad.github.io/awesome-css/modules/declutterplus.css");
In addition to our modules, here are some contributions from other developers:
๐ก Connection Glow on Hover by Vortex-Chaos
Make the connection buttons glow when hovering in Discord profiles.
@import url("https://raw.githubusercontent.com/Vortex-Chaos/Discord-Connections-Glow/main/Code.css");
๐ต Better Spotify Player by Panniku
Make the Spotify player look like it's from Samsung OneUI.
@import url("https://raw.githubusercontent.com/Panniku/vc-snippets/main/BetterSpotifyPlayer.css");
๐ผ๏ธ Acrylic Pop-outs by Skyli
Give pop-outs such as user profiles a background blur effect.
@import url("https://aushevahmad.github.io/awesome-css/modules/acrylicpopup.css");
๐ฒ Alt Text Improvements by Saltssaumure
Display a 'show alt` button for any image that has alt text.
@import url("https://minidiscordthemes.github.io/Snippets/AltTextImprovements/main.css");
๐ QuickSwitch V2 by Dablulite
A redesign to Discord's quickswitcher, making it look more like spotlight and similar search bars.
@import url("https://dablulite.github.io/css-snippets/QuickSwitchV2/import.css");
๐ Account Details Grid by Dablulite
A refresh to the now archived "account details columns" snippet.
@import url("https://dablulite.github.io/css-snippets/AccountDetailsGrid/import.css");
๐ฌ Tabs V2 Home Icon by Dablulite
Replace the Discord Home icon with a modern Chats icon.
@import url("https://dablulite.github.io/css-snippets/TabsV2HomeIcon/import.css");
๐จ Hotfix for the Nitro Themes by Dablulite
Hotfix that styles the previously unstyled areas when using Nitro Themes.
@import url("https://dablulite.github.io/css-snippets/NitroThemesFix/import.css");
To install these modules:
-
Open the CSS file for your modded Discord client. We recommend using Vencord or BetterDiscord.
-
Vencord: In the Vencord settings tab, ensure Enable Custom CSS is turned on, then select 'Open QuickCSS File'.
-
BetterDiscord: Open the CustomCSS tab in settings.
-
-
Paste the CSS modules you want into the CSS file.
-
That's it! If you experience issues, try reloading your client.
If you prefer not to receive updates, see Customizing Modules.
If you would like to to customize your modules:
-
Open the link found in the module's
@import
URL. -
Copy all of the CSS and paste it into your custom CSS file.
-
You can now customize any of the module's contents. Doing this means the modules will not receive updates from this repository.
If you encounter any issues or have ideas for improvement, please report them in GitHub's Issues tab.
This project is maintained by Ahmad, FormalSnake, geb, and Kami.
Special thanks to the following third-party developers for their contributions: