In this post, I’ll guide you through customizing and editing a Discord theme. Whether you're tweaking colors or adding your own CSS, this step-by-step guide will help you personalize your Discord experience.



1. Install a Mod Client

Before you can use custom themes, you’ll need to install a Discord mod client such as:



2. Download a Theme

Once your mod client is set up:

  1. Go to the BetterDiscord.
  2. Choose a theme you like and download the .theme.css file.
  3. You can also download my themes here.


3. Customize the Theme

If the theme supports customization, you can modify its appearance by editing the theme file.


Steps:

  1. Open the .theme.css file using a text editor like Notepad, Notepad++, or any other text editors/ide.
  2. Look for the :root section — this is where the customizable variables are defined.

Each variable corresponds to a specific part of the theme. You can change colors, images, and more just by updating the values.


Example:

Here’s a snippet from my Dark+ theme:


:root {
  --darkplus-bg: #212121;
  --darkplus-bg2: #302f2f;
  --darkplus-sec: #bb86fc;
  --darkplus-links: #cdaef3;
  --darkplus-home-icon: url(https://i.imgur.com/RvlNQ7k.png);
  --watermark-filter-invert: 0%;
  --watermark-filter-sepia: 50%;
  --watermark-filter-saturate: 3000%;
  --watermark-filter-hue-rotate: 210deg;
  --watermark-filter-brightness: 70%;
  --watermark-filter-contrast: 200%;
}

To change the background color, simply modify:

--darkplus-bg: #212121;

Replace #212121 with any valid hex color code.



4. Add Custom CSS (Optional)

If you want to go further and add your own styles:

  1. Follow the steps above to open the theme file.
  2. Scroll below the :root section.
  3. Add your custom CSS code.

Example:

:root {
  --darkplus-bg: #212121;
  --darkplus-bg2: #302f2f;
  --darkplus-sec: #bb86fc;
  --darkplus-links: #cdaef3;
  --darkplus-home-icon: url(https://i.imgur.com/RvlNQ7k.png);
  --watermark-filter-invert: 0%;
  --watermark-filter-sepia: 50%;
  --watermark-filter-saturate: 3000%;
  --watermark-filter-hue-rotate: 210deg;
  --watermark-filter-brightness: 70%;
  --watermark-filter-contrast: 200%;
}

.custom-code {
  color: purple;
}


Feel free to ask questions in the comments!