How to Create a Custom Theme for Discord

How to Create a Custom Theme for Discord 

Overview

This simple and basic guide will walk you through the steps to create a custom theme for Discord using BetterDiscord. To follow along, you’ll need a basic understanding of CSS, the language used to style and layout web pages. If you're new to CSS, consider brushing up on the basics as it will be essential for customizing the Discord interface.

---

Prerequisites 

Before starting, make sure you have the following:

1. BetterDiscord: An extended client for Discord, which allows installing custom themes and plugins.
2. Code Editor - Recommended: Visual Studio Code: A powerful editor for writing and organizing code.
3. CSS Knowledge: Familiarity with CSS syntax and styling rules will be necessary to create and customize your theme.

Note: BetterDiscord is a third-party extension and is unofficial. Be sure you’re comfortable using it, as it modifies Discord's default functionality.

---

Step 1: Install BetterDiscord 

Watch the video below for a step-by-step installation tutorial for BetterDiscord:

Installation Tutorial Video

---

Step 2: Preparing for Theme Creation 

To create a theme, you’ll need to modify certain Discord interface elements. Here’s how to access and inspect those elements:

1. Open the Inspector Panel

   • On Windows: Press Ctrl + Shift + I
   • On Mac: Press ⌥ + ⌘ + I

   The inspector will open, allowing you to view and interact with the HTML structure of Discord.

2. Select Elements to Style
   After the inspector opens:

   • Press Ctrl + Shift + C to select specific elements on the page.

3. Identifying Classes
   As you hover over Discord elements, you’ll see their class names displayed. For example, selecting an icon in the chat box might show icon-3D60ES. Note down the classes of the elements you want to style, as you’ll use these in your theme file.

   Video Demonstration of Element Selection
   
   

---

Step 3: Creating a Theme File 

To set up your theme file, follow these steps:

1. Locate the BetterDiscord Themes Folder

   • Option 1: Open Discord > Go to BetterDiscord settings > Open the themes folder.

     (Note: These images are old, and some things may have changed since then.)

   • Option 2: Open the folder directly by navigating to C:\Users\YourUsername\AppData\Roaming\BetterDiscord\themes

2. Create Your Theme File

   • Inside the themes folder, create a new file with the .theme.css extension, such as CustomTheme.theme.css.
     
     

---

Step 4: Adding Basic Theme Metadata 

To ensure your theme works, begin your file with metadata. Copy the following template and update it with your theme details:

/**

* @name YourThemeName

* @author YourName#1234

* @version 1.0

* @description A brief description of your theme.

* @authorId YourDiscordID

* @authorLink https://yourwebsite.com

* @source https://github.com/YourGitHubRepo

* @website https://yourwebsite.com

* @invite discordInviteCode

*/

• Required Fields: @name, @version, and @description are necessary for the theme to function properly.

---

Step 5: Writing Theme Code 

Now, it’s time to add custom styles to your theme file:

1. Basic Styling

   • Using the class names you collected earlier, write CSS to style Discord elements as you like.
   • For example, to change the color of an icon class, your code might look like this:

   .icon-3D60ES {    color: #bb86fc;}

1. Preview and Tweak
   Save your changes and load the theme in Discord to see how it looks. Adjust as necessary by adding styles or modifying the existing ones.

2. Customization Options
   Once you’re comfortable with CSS, experiment with advanced options like:

   • Changing Icon Styles: Swap out icons for custom ones or change their colors.
   • Adding Animations: Make elements animate on hover or when interacting with them.
   • Repositioning Elements: Move components to different parts of the UI.

   

Congratulations!  You’ve now created your own Discord theme.

---

Additional Resources and Support

If you encounter issues or have questions, feel free to reach out. Here are some helpful links:

• Official BetterDiscord Documentation
• Contact Form
• Email
• Discord Username: @devevil
• Support Server

---

Explore My Themes

You can download all of my themes by going to:

• BetterDiscord Website