Modular

[!IMPORTANT] Yes, Discord has ruined everything. It is unlikely that I will be able to fix the theme in its current condition.

Introduction

This is one of the first themes that is made exclusively for Vencord/Vesktop.

Since Discord's update to the new Chromium version, this theme now also supports the regular Vencord.

Features

• High customizability:
  • Customizable base, accent and Discord colors (red, yellow, green, etc.)
  • Modules (user panel, member list, guild list etc.) that can be flipped around
  • Adjustable primary and code font
  • Add a custom name on the titlebar to make the layout more personal
• A revamped look for many elements, including profile panels and modals, Spotify controls and many more!
• Compatibility and quality of life changes for many of Vesktop's existing plugins
• Active support (to my ability)
• Some of the elements of this theme are available separately as snippets. Check them out here.

Screenshots

Default Configuration

Example Configuration

Apply and customize

[!IMPORTANT] Starting from future releases, there will be additional color schemes (flavors) to choose from. The theme names will then be modular_{flavor_name}.theme.css. For example, the current Rosebox flavor will become modular_rosebox.theme.css. If you want to create your custom color scheme, start from the default modular.theme.css file.

Apply

There are several methods to apply this theme:

<details> <summary>Via Local Themes:</summary>

• Download the file modular.theme.css from this repository.
• Open Settings > Vencord > Themes > Local Themes > Open Themes Folder.
• Paste the downloaded file into the themes folder.

</details> <details> <summary>Via Online Themes</summary>

• Open Settings > Vencord > Themes > Online Themes.
• Paste the following link into Theme Links: https://raw.githubusercontent.com/SEELE1306/Modular/release/modular.theme.css
• Enter or mouse-click outside the Online Themes box to apply

</details> <details> <summary>Via QuickCSS</summary>

• Open Settings > Vencord > Vencord > Open QuickCSS File
• Paste the following line as your first line (ahead of any other custom CSS): @import url(https://raw.githubusercontent.com/SEELE1306/Modular/release/modular.theme.css);.

</details>

Customization

A large part of the following guide is also available inside the modular.theme.css file.

To start customizing your layout, copy and paste the file modular.theme.css into your QuickCSS.

The default color scheme (flavor) is Rosebox, and there are two preloaded fonts: Inter, Roboto Mono.

Additional supported add-ons are available in modular.theme.css. For more snippets, you can visit here.

Special thanks to

My theme, at the end of the day, is just a compilation of the many snippets that I have found. I will try my best to credit all the users whose snippets I have ultilized, but if your name does not show up here, feel free to contact me.

Credits

coolesding, Saltssaumure, DaBluLite, Vendicated, CodeF53, AkiraSimplex (akirasimplex on Discord)

Issues

You tell me!