Custom CSS

Learn how to write and use custom CSS to personalize Discord beyond themes

Custom CSS allows you to write your own styles to customize Discord’s appearance beyond what themes provide. This is perfect for making small tweaks or creating your own unique look.

What is custom CSS?

Custom CSS is a built-in BetterDiscord feature that lets you:

• Write your own CSS styles that apply to Discord
• Override or extend existing theme styles
• Test CSS changes in real-time
• Create personalized modifications without creating a full theme

Accessing the custom CSS editor

1. Open BetterDiscord settings

   Open Discord settings and scroll down to the BetterDiscord section.

2. Click Custom CSS

   Click on Custom CSS in the BetterDiscord settings menu.

   You can configure how the custom CSS editor opens in BetterDiscord settings under Settings > Custom CSS.

3. Start editing

   The editor will open based on your configured preference:

   • Built-in editor - Opens in Discord’s settings panel
   • Detached window - Opens in a floating window
   • System editor - Opens the CSS file in your default text editor
   • External editor - Opens in BetterDiscord’s web-based editor

Using the built-in CSS editor

The built-in editor provides several features:

• Syntax highlighting - Color-coded CSS for easier reading
• Line numbers - Keep track of your code
• Auto-save - Changes save automatically (when live update is enabled)
• Toolbar actions - Quick access to save, update, and open actions

Editor settings

You can configure the editor behavior:

• Live Update - Automatically applies changes as you type
• Open Action - Choose how the editor opens (built-in, detached, system, or external)

Enable live update to see your changes in real-time without manually saving.

Writing custom CSS

Basic example

Here’s a simple example to change the Discord background color:

/* Change the background color */
.app-2CXKsg {
  background-color: #1a1a1a;
}

Targeting elements

Discord uses unique class names for its elements. To customize specific parts:

1. Use Discord’s DevTools (press Ctrl+Shift+I or Cmd+Option+I)
2. Use the element inspector to find class names
3. Write CSS rules targeting those classes

Discord’s class names can change with updates. Your custom CSS may need adjustments after Discord updates.

Using CSS variables

You can define your own CSS variables for easier customization:

:root {
  --my-primary-color: #7289da;
  --my-accent-color: #43b581;
  --my-background: #2c2f33;
}

/* Use the variables */
.theme-dark {
  --background-primary: var(--my-background);
}

Custom CSS file location

Your custom CSS is stored in a file:

• Windows: %appdata%/BetterDiscord/data/stable/custom.css
• macOS: ~/Library/Application Support/BetterDiscord/data/stable/custom.css
• Linux: ~/.config/BetterDiscord/data/stable/custom.css

The path includes the Discord release channel (stable, canary, or PTB). Each channel has its own custom CSS file.

How custom CSS works

Loading and injection

When BetterDiscord starts:

1. Reads the custom.css file from your data folder
2. Injects the CSS into Discord’s page
3. Watches the file for changes
4. Automatically reloads when the file is modified

Live updates

When live update is enabled:

• Changes are applied as you type in the editor
• The CSS is saved automatically (with a debounce to avoid excessive writes)
• You see changes instantly without manually saving

Application order

Custom CSS is applied after themes, which means:

• Your custom CSS can override theme styles
• Themes won’t override your custom CSS
• You can use !important if needed, but it’s usually not necessary

Common customizations

Changing font

* {
  font-family: 'Your Font Name', sans-serif;
}

Hiding elements

/* Hide the gif button */
.buttons-uaqb-5 button[aria-label="Send a gift"] {
  display: none;
}

Custom scrollbars

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #2c2f33;
}

::-webkit-scrollbar-thumb {
  background: #7289da;
  border-radius: 6px;
}

Transparency effects

.app-2CXKsg {
  background: transparent;
}

.bg-1QIAus {
  background: rgba(0, 0, 0, 0.6);
}

Transparency effects may require additional configuration in Discord or your operating system to work properly.

Editor modes

Built-in editor

Opens within Discord’s settings panel. Best for quick edits.

Pros:

• No need to switch applications
• Live preview alongside the editor
• Auto-save with live update

Cons:

• Limited screen space
• Can’t see full Discord while editing

Detached window

Opens in a floating window that stays on top.

Pros:

• More screen space than built-in
• Can position anywhere on screen
• Still has live preview
• Resizable window

Cons:

• Takes up screen space
• May hide parts of Discord

System editor

Opens the CSS file in your default text editor.

Pros:

• Use your preferred editor with all its features
• Better for large CSS files
• Can use editor plugins and extensions

Cons:

• No live preview in Discord
• Must save file manually to see changes
• Need to switch between applications

External editor

Opens in BetterDiscord’s web-based editor (if available).

Pros:

• Full-featured web editor
• Can access from anywhere
• Advanced editing features

Cons:

• Requires internet connection
• Opens in browser

File watching

BetterDiscord automatically watches the custom.css file:

• Changes from any source are detected
• The CSS is automatically reloaded
• You’ll see an event notification when the CSS updates

This means you can edit the file in any text editor, and Discord will automatically reload your changes.

Debugging CSS

If your CSS isn’t working:

Use DevTools

1. Open DevTools (Ctrl+Shift+I or Cmd+Option+I)
2. Go to the Elements/Inspector tab
3. Check if your CSS rules are being applied
4. Look for crossed-out rules (being overridden)

Check specificity

If your rule isn’t applying, you may need to increase specificity:

/* Low specificity */
.className { }

/* Higher specificity */
.parentClass .className { }

/* Highest (avoid if possible) */
.className { color: red !important; }

Validate syntax

Check for common syntax errors:

• Missing semicolons
• Unclosed brackets
• Invalid property values
• Typos in property names

Best practices

Organize your code - Use comments to separate sections and explain complex rules.

/* ===== VARIABLES ===== */
:root {
  --my-color: #7289da;
}

/* ===== BACKGROUND ===== */
.app-2CXKsg {
  background: var(--my-color);
}

/* ===== MESSAGES ===== */
.message-2CShn3 {
  /* Your styles */
}

Test incrementally - Add and test small sections at a time to identify issues easily.

Backup your CSS - Save a copy of your custom CSS file before making major changes.

Advanced techniques

CSS animations

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.sidebar-1tnWFu {
  animation: slideIn 0.3s ease;
}

Media queries

/* Adjust styles based on screen size */
@media (max-width: 1200px) {
  .sidebar-1tnWFu {
    width: 200px;
  }
}

Pseudo-elements

/* Add content before elements */
.username::before {
  content: "👑 ";
}

Troubleshooting

If custom CSS isn’t loading:

1. Check if Custom CSS is enabled - Go to BetterDiscord Settings > Custom CSS
2. Check the file location - Ensure the file exists in the correct location
3. Check file permissions - Make sure BetterDiscord can read/write the file
4. Try reloading Discord - Press Ctrl+R (or Cmd+R on macOS)
5. Check for syntax errors - Use a CSS validator or your editor’s linter

For more help, see the troubleshooting guide.