🧩 Complementary 🧩

A Discord theme which only provides some QOL enhancements that can be used in addition to others

🎉 Features

There are 3 variants of the theme

• Complementary
  • Includes all enhancement that I think everyone likes
  • Includes the Nitro upselling styles (for historical reasons)
• Nitro Upselling
  • Only includes the Nitro upselling styles
• Personal QOL
  • Includes some more enhancements that I personally like

Complementary

• Settings Icons
• Collapsed Search Bar
• Hide Nitro upselling (Disclaimer: I am using the Vencord FakeNitro plugin so it doesn't cover these cases)
• Hide Help Button

Personal QOL

• Server Columns
• Custom Fonts
• JoyPixels emojis
• Don't highlight new Emojis
• Remove avatar decorations in chat
• Remove profile effects
• Remove "x in voice" scroll indicator
• Restore old attachment sizing behavior
• Reveal masked hyperlinked
• Remove boosting progressbar

❕ Required Fonts

• SF Pro Display
• SF Mono (For codeblocks)

If you are on Arch Linux just install otf-san-francisco and otf-san-francisco-mono with your favorite AUR helper. Otherwise download, extract and install them manually (e.g. using 7-Zip)

📥 Installation

Vencord

• Open settings, click on Themes under Vencord then click on Online Themes
• Add a new line with this content:
  • Complementary: https://d3sox.me/complementary-discord-theme/complementary.theme.css
  • Nitro Upselling: https://d3sox.me/complementary-discord-theme/hide-nitro-upselling.theme.css
  • Personal QOL: https://d3sox.me/complementary-discord-theme/personal-qol.theme.css

OpenAsar

• Open settings, scroll to the bottom on the left and click on the OpenAsar version, then click on Theming
• Add a new line at the top with this content:
  • Complementary: @import url(https://d3sox.me/complementary-discord-theme/complementary.theme.css);
  • Nitro Upselling: @import url(https://d3sox.me/complementary-discord-theme/hide-nitro-upselling.theme.css);
  • Personal QOL: @import url(https://d3sox.me/complementary-discord-theme/personal-qol.theme.css);

Replugged

• Open your themes folder and clone this repository

  git clone https://github.com/D3SOX/complementary-discord-theme

• Set the value of theme in complementary-discord-theme/manifest.json to the following
  • Complementary: complementary.theme.css
  • Nitro Upselling: hide-nitro-upselling.theme.css
  • Personal QOL: personal-qol.theme.css

BetterDiscord

• Open your themes folder
• Drop the following CSS in your themes folder (Press Ctrl + S to save the file)
  • Complementary: complementary.betterdiscord.theme.css
  • Nitro Upselling: hide-nitro-upselling.betterdiscord.theme.css
  • Personal QOL: personal-qol.betterdiscord.theme.css

🧮 Customize Server Columns

Add and adjust the following CSS

:root {
  --columns: 2;
  --guildsize: 40;
  --guildgap: 3;
  --aligndms: 0;
}