Making a theme

Want to make a theme of your own? Here's a quick tutorial on how to make some custom themes for Discord. If you can improve this tutorial please add it by clicking the pencil on top.

Rules

These are some rules we as a community have agreed on to keep our theme list fresh and different.

  • If you are making a theme but using another released theme as a base folllow the rules below.
    • You have to ask the theme author for permission to use the his theme as a base.
    • Credit the author no matter what. Now use this template for crediting inside the CSS.
      ------------------------------
      This theme was based on another theme.
      Original Author: Author
      Original Theme: Theme url
      ------------------------------
  • Do not release a theme if you simply just changed the background image and changed the default colors of an existing theme.
  • Giving credit to the author doesn't give you permission to release a theme that has little to no visible changes.
  • Breaking any of the rules will result in your theme being deleted.

Template

For making a transparent theme use this template to use as a base no credit is needed for it and is a great place to start.

Tutorial

Time to learn how to make a theme.

  • First thing first you will need to have some knowledge of CSS without it you will not be able to make a theme.

    Now heead on over to the Themes directory

    Windows: %appdata%\betterdiscord\themes\
    Mac: ~/Library/Preferences/BetterDiscord/themes/
  • Make a file called ScarryNight.theme.css

  • Open the file we just made with a text editor (not notepad) and insert this on the first line

    //META{"name":"Scarry_Night","description":"My first theme.","author":"Omniscient","version":"1.00"}*//
    Tip: Spaces in the title should use _ instead of an actual space to fix any future problems.
  • When you reload Discord go to themes in the BetterDiscord settings and you should see this.
    ScarryNight in BetterDiscord settings

  • You will notice enabling it will do nothing that's because we haven't added any CSS in the file yet lets insert some basic CSS paste this in the file under the META tag.

    /* Background image */
    
    .app, .callout-backdrop {
    background: url(https://imgur.com/TAhoyVZ.png) !important;
    background-size: cover !important;
    }
    
    /* transparent areas */
    
    .chat, .account, .typing, .content, .guild-channels, .private-channels, .guild-header, .divider-red span, .messages-wrapper, #voice-connection {
    background: transparent !important;
    }
    
    /* Server list area */
    
    .guilds-wrapper {
    background: rgba(0, 0, 0, 0.6) !important;
    }
    
    /* Channels list area */
    
    .channels-wrap {
    background: rgba(0, 0, 0, 0.7) !important;
    }
    .guild-channels .channel-text.selected {
    background: linear-gradient(90deg,rgba(0,0,0,0.55) 85%,rgba(0, 0, 0, 0));
    }
    .guild-channels .channel-text:hover {
    background: linear-gradient(90deg,rgba(0,0,0,0.65) 85%,rgba(0, 0, 0, 0));
    }
    
    /* Header and Header Drop Down */
    
    .guild-header header {
    background-color: rgba(0, 0, 0, 0.55);
    }
    .guild-header header:hover {
    background-color: rgba(0, 0, 0, 0.7);
    }
    .guild-header ul {
    top: 13px;
    }
    .guild-header.guild-header-open ul {
    top: 57px;
    }
    
    /* Chat area */
    
    .content .flex-spacer {
    background: rgba(0, 0, 0, 0.8) !important;
    }
    
    /* User list area */
    
    .channel-members {
    background: rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Title Wrap */
    
    .chat .title-wrap {
    background-color: rgba(0, 0, 0, 0.85) !important;
    border-bottom: 1px solid transparent !important;
    }
  • Finally save the file and head back to Discord and restart it and you will see Discord transparent to a certain extent.

Tips

  • Use the inspect element tool inside Discord by doing CTRL+SHIFT+I now you will be able to see what elements have what classes. Classes? It's a CSS thing.
  • Discord has its own "Light" and "Dark" themes and you can edit them individually.
    • Light Theme --> .theme-light .chat
    • Dark Theme --> .theme-dark .chat
  • Want your theme to work for both "Light" and "Dark" themes? Make sure all your classes don't have .theme-dark nor .theme-light and just !important everything!