An open API service indexing awesome lists of open source software.

https://github.com/catppuccin/discord

๐ŸŽฎ Soothing pastel theme for Discord
https://github.com/catppuccin/discord

betterdiscord-theme catppuccin discord discord-theme hacktoberfest powercord-theme stylus vencord-theme

Last synced: 1 day ago
JSON representation

๐ŸŽฎ Soothing pastel theme for Discord

Awesome Lists containing this project

README

        


Logo


Catppuccin for Discord





![Discord Theme Preview](assets/preview.webp)

## Previews

๐ŸŒป Latte

๐Ÿชด Frappรฉ

๐ŸŒบ Macchiato

๐ŸŒฟ Mocha

## Usage

### [BetterDiscord](https://betterdiscord.app)

1. Download your preferred flavour:

- ๐ŸŒป [Latte](./themes/latte.theme.css?raw=1)
- ๐Ÿชด [Frappe](./themes/frappe.theme.css?raw=1)
- ๐ŸŒบ [Macchiato](./themes/macchiato.theme.css?raw=1)
- ๐ŸŒฟ [Mocha](./themes/mocha.theme.css?raw=1)

2. Copy the downloaded file to your BetterDiscord themes folder.
3. Enable the theme in BetterDiscord settings.

### Clients/Mods with custom CSS support

1. Simply add your preferred flavour into your discord clients CustomCSS file/editor.

```css
/* latte */
@import url("https://catppuccin.github.io/discord/dist/catppuccin-latte.theme.css");
/* frappe */
@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css");
/* macchiato */
@import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css");
/* mocha */
@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css");

/* You can also append Catppuccin colors to customize the accent, e.g. */
/* mocha (pink accent)*/
@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha-pink.theme.css");
/* frappe (maroon accent) */
@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe-maroon.theme.css");
```

### [Stylus](https://github.com/openstyles/stylus)

1. Enable CSP Patching from Stylus Settings > Advanced.
2. [Click here to install](https://github.com/catppuccin/discord/raw/main/discord.user.css).
3. Choose your preferred flavour and accent color from the Stylus preference dropdown.

## ๐Ÿ™‹ FAQ

- Q: **_"Can this get my account banned?"_**
- A: Using third party clients and injecting custom css is against the ToS. While nobody has ever been banned for simply using discord client mods, We are not responsible for anything that might happen to your account by using third party clients. Use at your own discretion!

- Q: **_"Can I automatically switch flavors between light and dark mode?"_**
- A: The following snippet showcases a configuration that switches between latte in light mode and mocha in dark mode by adding an inline [`prefers-color-scheme` media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), `(prefers-color-scheme: )`, after each `@import` statement (see ["Importing CSS rules conditional on media queries" - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_media_queries)).

```css
@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css")
(prefers-color-scheme: dark);
@import url("https://catppuccin.github.io/discord/dist/catppuccin-latte.theme.css")
(prefers-color-scheme: light);
```

- Q: **_"Can I disable Rainbow Threads"_**
- A: Yes, by placing the following in your QuickCSS threads will be the same colour as typical channels. *note: please respect the `space` between the colon and semi-colon*
```css
:root {
--ctp-rainbow-thread-disabled: ;
}
```

## ๐Ÿ’ Thanks to

- [GlowingUmbreon](https://github.com/glowingumbreon)
- [Isabelinc](https://github.com/Isabelincorp)
- [Ren](https://github.com/watatomo)
- [winston](https://github.com/nekowinston)
- [rubyowo](https://github.com/rubyowo)
- [Aven](https://github.com/ToxicAven)

ย 


Copyright ยฉ 2021-present Catppuccin Org