{"id":18858246,"url":"https://github.com/devevil99/how-to-create-a-bd-theme","last_synced_at":"2025-03-06T06:19:10.454Z","repository":{"id":125446538,"uuid":"400872541","full_name":"DevEvil99/How-To-Create-A-BD-Theme","owner":"DevEvil99","description":"How to Create a Custom Theme for Discord","archived":false,"fork":false,"pushed_at":"2025-03-03T19:12:44.000Z","size":77,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-03T20:24:56.433Z","etag":null,"topics":["betterdiscord","betterdiscord-theme","discord","discord-theme","guide","theme"],"latest_commit_sha":null,"homepage":"https://devevil.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevEvil99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-28T19:18:09.000Z","updated_at":"2025-03-03T19:21:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"83d9e611-2d1b-4400-8f9e-a997a9cbe8ff","html_url":"https://github.com/DevEvil99/How-To-Create-A-BD-Theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevEvil99%2FHow-To-Create-A-BD-Theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevEvil99%2FHow-To-Create-A-BD-Theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevEvil99%2FHow-To-Create-A-BD-Theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevEvil99%2FHow-To-Create-A-BD-Theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevEvil99","download_url":"https://codeload.github.com/DevEvil99/How-To-Create-A-BD-Theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242157274,"owners_count":20081041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["betterdiscord","betterdiscord-theme","discord","discord-theme","guide","theme"],"created_at":"2024-11-08T04:11:09.798Z","updated_at":"2025-03-06T06:19:10.446Z","avatar_url":"https://github.com/DevEvil99.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## How to Create a Custom Theme for Discord 😄\n\n### Overview\nThis 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.\n\n---\n\n### Prerequisites 📋\nBefore starting, make sure you have the following:\n1. **[BetterDiscord](https://betterdiscord.app/)**: An extended client for Discord, which allows installing custom themes and plugins.\n2. **[Code Editor - Recommended: Visual Studio Code](https://code.visualstudio.com/download)**: A powerful editor for writing and organizing code.\n3. **CSS Knowledge**: Familiarity with CSS syntax and styling rules will be necessary to create and customize your theme.\n\n\u003e **Note:** BetterDiscord is a third-party extension and is unofficial. Be sure you’re comfortable using it, as it modifies Discord's default functionality.\n\n---\n\n### Step 1: Install BetterDiscord ❗\n\nWatch the video below for a step-by-step installation tutorial for BetterDiscord:\n\n[Installation Tutorial Video](https://user-images.githubusercontent.com/73029696/131230139-ac3a1b8d-b30c-482a-a32c-db195bdabb0b.mp4)\n\n---\n\n### Step 2: Preparing for Theme Creation ❗\nTo create a theme, you’ll need to modify certain Discord interface elements. Here’s how to access and inspect those elements:\n\n1. **Open the Inspector Panel**  \n   - On **Windows**: Press `Ctrl + Shift + I`\n   - On **Mac**: Press `⌥ + ⌘ + I`\n\n   The inspector will open, allowing you to view and interact with the HTML structure of Discord.\n\n2. **Select Elements to Style**  \n   After the inspector opens:\n   - Press `Ctrl + Shift + C` to select specific elements on the page.\n\n3. **Identifying Classes**  \n   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.\n\n   [Video Demonstration of Element Selection](https://user-images.githubusercontent.com/73029696/131230597-dcd22461-15a7-461e-8245-a90ca156124b.mp4)\n\n---\n\n### Step 3: Creating a Theme File 📄\nTo set up your theme file, follow these steps:\n\n1. **Locate the BetterDiscord Themes Folder**  \n   - Option 1: Open Discord \u003e Go to BetterDiscord settings \u003e Open the themes folder.\n   \n     ![image](https://github.com/user-attachments/assets/020ec6de-dbac-4758-a89d-2a57cc7eec91)\n\n     ![image](https://github.com/user-attachments/assets/4fb32e31-6f19-44f3-a18f-8b3e39db524b)\n\n   \n   - Option 2: Open the folder directly by navigating to `C:\\Users\\YourUsername\\AppData\\Roaming\\BetterDiscord\\themes`\n\n2. **Create Your Theme File**  \n   - Inside the themes folder, create a new file with the `.theme.css` extension, such as `CustomTheme.theme.css`.  \n\n---\n\n### Step 4: Adding Basic Theme Metadata 📝\n\nTo ensure your theme works, begin your file with metadata. Copy the following template and update it with your theme details:\n\n```css\n/**\n  * @name YourThemeName\n  * @author YourName#1234\n  * @version 1.0\n  * @description A brief description of your theme.\n  * @authorId YourDiscordID\n  * @authorLink https://yourwebsite.com\n  * @source https://github.com/YourGitHubRepo\n  * @website https://yourwebsite.com\n  * @invite discordInviteCode\n*/\n```\n\n- **Required Fields**: `@name`, `@version`, and `@description` are necessary for the theme to function properly.\n\n---\n\n### Step 5: Writing Theme Code 💻\nNow, it’s time to add custom styles to your theme file:\n\n1. **Basic Styling**  \n   - Using the class names you collected earlier, write CSS to style Discord elements as you like.  \n   - For example, to change the color of an icon class, your code might look like this:\n\n   ```css\n   .icon-3D60ES {\n       color: #bb86fc;\n   }\n   ```\n\n![{22456BC5-495A-4C33-AD96-BA05D3EA2BFF}](https://github.com/user-attachments/assets/d9f15b19-e470-4c3f-9e35-fc9ae6b8e363)\n\n2. **Preview and Tweak**  \n   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.\n\n3. **Customization Options**  \n   Once you’re comfortable with CSS, experiment with advanced options like:\n   - **Changing Icon Styles**: Swap out icons for custom ones or change their colors.\n   - **Adding Animations**: Make elements animate on hover or when interacting with them.\n   - **Repositioning Elements**: Move components to different parts of the UI.\n\n   ![Final Theme Result](https://user-images.githubusercontent.com/73029696/131231231-e5f420bf-dd1f-4e5f-acc9-406d0a1a2522.png)\n\nCongratulations! 🎉 You’ve now created your own Discord theme.\n\n---\n\n### Additional Resources and Support\nIf you encounter issues or have questions, feel free to reach out. Here are some helpful links:\n- **[Official BetterDiscord Documentation](https://docs.betterdiscord.app/themes/)**\n- **[Contact Form](https://devevil.com/contact)**\n- **[Email](mailto:contact@devevil.com)**\n- **Discord Username**: @devevil\n- **[Support Server](https://dsc.gg/devevil)**\n\n---\n\n### Explore My Themes\nYou can download all of my themes by going to:\n- **[BetterDiscord Website](https://betterdiscord.app/developer/DevEvil)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevevil99%2Fhow-to-create-a-bd-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevevil99%2Fhow-to-create-a-bd-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevevil99%2Fhow-to-create-a-bd-theme/lists"}