Awesome CSS Snippets for Discord

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.

Modules Overview

Below is a list of modules available in this repository:

🍸 Bartender

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.

🙂 Custom Emoji

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");
}

⌨️ Custom Prompt

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";
}

📶 MemberCount Tweak

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");

💬 Channel Tweaks

A few changes to the channel list, to increase density.

@import url("https://aushevahmad.github.io/awesome-css/modules/channeltweaks.css");

🔍 Fancy Search

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");

🛑 Adblock

Block Discord Nitro/Shop/Server Boost ads.

@import url("https://aushevahmad.github.io/awesome-css/modules/adblock.css");

🛡️ Adblock+

Better version of Adblock module that removes billing settings and profile effects.

@import url("https://aushevahmad.github.io/awesome-css/modules/adblockplus.css");

🧹 Declutter

Remove useless buttons and give Discord a cleaner look.

@import url("https://aushevahmad.github.io/awesome-css/modules/declutter.css");

✨ Declutter+

Better version of Declutter module that also removes ads by default. (Recommended)

@import url("https://aushevahmad.github.io/awesome-css/modules/declutterplus.css");

Modules from Other Developers

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");

Installing Modules

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.

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.

Issues / Ideas

If you encounter any issues or have ideas for improvement, please report them in GitHub's Issues tab.

Credits

This project is maintained by Ahmad, FormalSnake, geb, and Kami.

Third-party Devs

Special thanks to the following third-party developers for their contributions:

MiniDiscordThemes / awesome-css