Discord Themes
Description
You can download diferent themes that make Discord look diferent from the internet. The only thing you need to have for using a Discord Theme is the BetterDiscord extension.
Downloading Themes and applying them
- First you have to install the Discord app. If you already have downloaded Discord you should check if you are on the newest version.
- Download the BetterDiscord extension from this Website and then follow the intalling steps
- Find Themes on the BetterDiscord Website https://betterdiscord.app/themes. If you have found a theme you would like to apply Download the theme from the Website.
- Now you will have to go into your Discord settings and into the themes section. There you will have to click “Open Themes Folder” and drag the Downloaded file into it. (Picture 1)
- Now you will have to enable the theme in the settings. (Picture 2)
Coding your own theme
Basics
- Create a file with the name [FileName].theme.css
- Drag it into your Themes folder (explained above)
- Discord is an Electron App which means you can use the chrome Dev tools using “ cmd+option+i ”. This is useful to find out HTML classes for diferent objects
- BetterDiscord changes the CSS of the original Discord file and “overwrites” it
The first thing you will have to add is the Meta data, that includes the Name of your Theme, the description, the author and the version of the Theme. Your Code editor might show this as false code but it works trust me.
The next thing you will have to add is the :root bracket. In the root bracket you can add diferent variables that will change the looks of your Discord. It will be structured like this:
This piece of code changes the background color to black. There are many diferent other Variables that will change something in your code.
Make a custom home icon
This is an example for a piece of code that will change your Discord Icon to a GIF or an icon. The Icon will have to be square. The code is explained in the comments of the code.
