Step 2: Writing Custom CSS and Themes

If you know some CSS, this is the place to start.

2.1: Developer settings

Before beginning, DevTools is a requirement to find class names and view Discord’s default styles for those classes. Open DevTools with Ctrl + Shift + I (windows/linux) / Cmd + Opt + I (mac).

BetterDiscord

1. Open Settings > BetterDiscord > Settings > Developer Settings.
2. Enable the following:
   • DevTools (mandatory)
   • Debugger Hotkey (convenient for quickly checking hover-only styles)
   • Inspect Element Hotkey (convenient shortcut)
   • Stop DevTools Warning (makes Console tab in devtools actually readable)

Replugged and Vencord

No extra steps needed, DevTools is enabled by default.

2.2: Writing Custom / Quick CSS

1. With the Inspect Element tool (top left corner of DevTools), click on an area that you want to style.
   • Clicking may not always give the exact right element, you may need to go up or down some levels in the document viewer panel.
     .
2. Copy the class name and write your styles for it in Custom / Quick CSS. Remember to save (and/or turn on Live Update) to see your changes.

Example

/* Turns the user panel green */
.container_ca50b9 {
    background: green;
}

Notes

• The in-app editor can be sluggish on less powerful devices, especially with Live CSS / Automatically Apply Quick CSS enabled. Try an external editor (eg. Notepad++, Nano, VSCode) if you experience issues.

2.3: Writing a theme

Custom / Quick CSS can quickly get cluttered and hard to navigate, so it’s better to write a theme in a separate file:

BetterDiscord and Vencord

This is covered by the BetterDiscord themes guide. Here’s a summary:

1. Go to the themes folder: Settings > Themes > Open Theme Folder.
2. Make a file with name ending in .theme.css, eg. MyTheme.theme.css.
3. Start the contents with the theme meta:

   /**
    * @name My Theme
    * @author My Name
    * @description This is my theme. There are many like it, but this one is mine.
    * @version 1.0
    */
   

4. Add your CSS rules after the meta.

Notes

• See the BetterDiscord docs for the full list of meta fields.
• The meta is allowed to contain other unrecognised fields, eg. @license, which will be simply ignored by the mod.

Replugged

1. Go to the themes folder: Settings > Themes > Open Themes Folder.
2. Make a folder with the name of your theme, eg. MyTheme.
3. In that folder, make:
   1. A file named manifest.json with the theme manifest:

       {
       "id": "com.example.mytheme",
       "name": "My Theme",
       "author": {
           "name": "My Name"
       },
       "description": "This is my theme. There are many like it, but this one is mine.",
       "version": "1.0.0",
       "license": "MIT",
       "type": "replugged-theme"
       }
      

   2. A file named main.css with your CSS rules.

Notes

• See the Replugged docs for the full list of manifest keys.
• Use choosealicense.com to find a license that suits your needs. The MIT license is common for open source projects, but you can use any license you like.