Managing themes

Learn how to enable, disable, and customize themes to personalize Discord

Themes change Discord’s appearance using custom CSS styles. This guide covers everything you need to know about managing and customizing your themes.

Accessing theme settings

To manage your themes:

1. Open Discord settings (click the gear icon)
2. Scroll down to the BetterDiscord section
3. Click on Themes

Here you’ll see a list of all installed themes with their current status.

Enabling and disabling themes

1. Find the theme

   In the Themes tab, browse your installed themes. Each theme shows:

   • Theme name and version
   • Author information
   • Description
   • Enable/disable toggle
2. Toggle the theme

   Click the toggle switch next to the theme name:

   • Green toggle = Theme is enabled and applied
   • Gray toggle = Theme is disabled

   You can enable multiple themes at once. They’ll be applied in the order they appear in your list.

Using multiple themes

Unlike plugins, you can enable multiple themes simultaneously:

• Themes are applied in order from top to bottom
• Later themes override styles from earlier themes
• This allows you to layer themes for combined effects

Try combining a base theme with smaller accent themes to create unique looks.

Theme variables

Many modern themes use CSS custom properties (variables) that you can customize:

Viewing theme variables

Some themes expose variables you can modify without editing the theme file:

1. Find the theme in the Themes tab
2. Click the Settings icon (if available)
3. View and modify available theme variables

Not all themes support customizable variables. This depends on how the theme author designed the theme.

Theme actions

Each theme has several actions available via the context menu (three dots icon):

Reload theme

Reloads the theme’s CSS without restarting Discord. Useful when:

• You’ve edited the theme file
• The theme isn’t displaying correctly
• You want to apply updates

Edit theme

Opens the theme file for editing. You can choose how to edit:

• System editor - Opens in your default text editor
• Detached window - Opens in BetterDiscord’s built-in CSS editor
• External editor - Opens in BetterDiscord’s web-based editor (if available)

The built-in CSS editor provides syntax highlighting and makes it easy to test changes in real-time.

Delete theme

Permanently removes the theme file from your themes folder.

This action cannot be undone. You’ll need to re-download the theme to use it again.

Bulk actions

You can perform actions on all themes at once:

• Enable All - Enables all installed themes
• Disable All - Disables all active themes
• Reload All - Reloads all enabled themes

Understanding theme states

Themes can be in different states:

Enabled and applied

The theme is active and its styles are applied to Discord. The toggle is green.

Disabled

The theme is installed but not applied. The toggle is gray.

Partially loaded (error)

The theme has metadata errors or is missing required information:

• A red error indicator appears
• An error message describes the issue
• The theme can still be edited or deleted

Theme updates

BetterDiscord automatically detects changes to theme files:

• When a theme file is modified, it’s automatically reloaded
• Changes are applied immediately without needing to toggle the theme
• You’ll see a toast notification when a theme is updated

This makes it easy to develop and test theme modifications—just save the file and see your changes instantly.

Theme requirements

For a theme to work properly, it must:

1. Have a valid JSDoc metadata block with:
   • @name - The theme name
   • @author - The theme author
   • @description - A brief description
   • @version - The version number
2. End with the .theme.css extension
3. Contain valid CSS code

Example theme metadata

/**
 * @name My Awesome Theme
 * @author YourName
 * @description A beautiful theme for Discord
 * @version 1.0.0
 */

/* Your CSS styles here */

Advanced theme features

CSS custom properties

Themes can define custom properties (CSS variables) for easy customization:

@property --primary-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #7289da;
}

BetterDiscord automatically detects these properties and can expose them for user customization.

Import statements

Themes can import other CSS files or fonts:

@import url('https://fonts.googleapis.com/css2?family=Roboto');

Be cautious when using themes that import from external URLs, as they could change without notice or potentially track your usage.

Combining themes with custom CSS

For maximum customization, you can use themes together with custom CSS:

1. Enable one or more themes as a base
2. Use custom CSS to make small tweaks or additions
3. Your custom CSS will be applied after all themes

Theme compatibility

Themes may stop working after Discord updates because:

• Discord changes its CSS class names
• Discord restructures its HTML elements
• Discord adds or removes features

When Discord updates, check the theme’s download page or repository for updates. Many theme authors actively maintain their themes.

Finding themes

You can find themes at:

• BetterDiscord themes library - Official reviewed themes
• GitHub - Many authors host themes in repositories
• Community Discord servers - Get recommendations and support

Only download themes from trusted sources. Malicious CSS could potentially be used for phishing or to hide Discord’s interface elements.

Troubleshooting themes

If a theme isn’t working:

1. Check if it’s enabled - Look for the green toggle
2. Check for errors - Look for error messages in the theme list
3. Try reloading - Use the reload action from the context menu
4. Check for conflicts - Try disabling other themes to identify conflicts
5. Verify the file - Make sure the file has valid metadata and CSS
6. Check for updates - The theme may need updating for the current Discord version

For more help, see the troubleshooting guide.