Styling guide

CSS variables, class structure, and styling techniques for Discord

Discord uses CSS custom properties (variables) extensively, making it easy to theme without targeting specific classes.

Discord CSS variables

Discord provides hundreds of CSS variables for theming. Here are the most commonly used ones:

Background colors

:root {
  /* Primary backgrounds */
  --background-primary: #36393f;
  --background-secondary: #2f3136;
  --background-tertiary: #202225;
  
  /* Secondary backgrounds */
  --background-base-low: #1e1f22;
  --background-base-lower: #0c0d0e;
  --background-base-lowest: #000000;
  
  /* Accent backgrounds */
  --background-secondary-alt: #292b2f;
  --background-accent: #4f545c;
}

Text colors

:root {
  /* Text */
  --text-default: #dcddde;
  --text-muted: #96989d;
  --text-strong: #ffffff;
  --text-link: #00b0f4;
  --text-brand: #5865f2;
  
  /* Feedback text */
  --text-feedback-warning: #faa81a;
  --text-feedback-positive: #23a55a;
  --text-danger: #f23f43;
}

Brand colors

:root {
  /* Discord brand */
  --brand-experiment: #5865f2;
  --brand-experiment-560: #505cdc;
  --brand-experiment-600: #4752c4;
  
  /* Status colors */
  --status-danger: #f23f43;
  --status-warning: #faa61a;
  --status-positive: #23a55a;
}

Interactive elements

:root {
  /* Buttons and controls */
  --control-secondary-background-default: #4e5058;
  --control-secondary-background-hover: #5c5e66;
  --control-secondary-background-active: #6a6d75;
  
  --interactive-text-default: #b5bac1;
  --interactive-text-hover: #dcddde;
  --interactive-background-hover: #3c3f45;
  --interactive-background-active: #35383e;
}

Spacing and layout

:root {
  /* Border radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-low: 0 1px 0 rgba(4,4,5,0.2);
  --shadow-high: 0 8px 16px rgba(0,0,0,0.24);
  --elevation-low: 0 1px 5px rgba(0,0,0,0.2);
}

Discord class structure

Discord uses webpack-generated class names that include a hash. Always use attribute selectors:

Messages

/* Message container */
[class*="message_"] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 4px 16px;
  margin: 2px 0;
}

/* Message content */
[class*="messageContent_"] {
  color: var(--text-default);
}

/* Message author */
[class*="username_"] {
  color: var(--text-strong);
  font-weight: 600;
}

/* Mentioned message */
[class*="mentioned_"] {
  background-color: rgba(250, 166, 26, 0.1);
  border-left: 2px solid var(--status-warning);
}

Channels and servers

/* Channel list */
[class*="sidebar_"] {
  background-color: var(--background-secondary);
}

/* Channel item */
[class*="channel_"] {
  border-radius: 4px;
  padding: 6px;
  margin: 2px 8px;
}

/* Active channel */
[class*="channel_"][class*="modeSelected_"] {
  background-color: var(--background-accent);
}

/* Server list */
[class*="guilds_"] {
  background-color: var(--background-tertiary);
}

/* Server icon */
[class*="guild_"] {
  border-radius: 50%;
  transition: border-radius 0.2s;
}

[class*="guild_"]:hover {
  border-radius: 15px;
}

Modals and popups

/* Modal backdrop */
[class*="backdrop_"] {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

/* Modal container */
[class*="modal_"] {
  background-color: var(--background-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
}

/* Modal header */
[class*="header_"] {
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--background-accent);
}

User interface elements

/* Scrollbars */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--background-accent);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5c5e66;
}

/* Buttons */
[class*="button_"] {
  background-color: var(--brand-experiment);
  border-radius: var(--radius-sm);
  transition: all 0.17s ease;
}

[class*="button_"]:hover {
  background-color: var(--brand-experiment-560);
}

BetterDiscord-specific elements

BetterDiscord adds its own elements that you can style:

/* BetterDiscord settings */
#bd-settings-sidebar {
  background-color: var(--background-secondary);
}

/* BetterDiscord badges */
.bd-chat-badge {
  vertical-align: bottom;
  line-height: 1.375rem;
  height: 1.25rem;
}

.bd-member-badge {
  height: 15px;
  margin-left: 4px;
}

/* Custom CSS editor */
#bd-editor-panel {
  background: var(--background-base-lower);
}

#bd-editor-controls {
  background: var(--background-secondary-alt);
  color: var(--text-default);
}

/* Toasts */
.bd-toast {
  background-color: hsl(218, calc(var(--saturation-factor, 1) * 14%), 15%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-high);
  color: var(--text-default);
}

.bd-toast.toast-success {
  background-color: hsl(168, calc(var(--saturation-factor, 1) * 24%), 12%);
  color: hsl(145, calc(var(--saturation-factor, 1) * 54%), 49%);
}

.bd-toast.toast-error {
  background-color: hsl(337, calc(var(--saturation-factor, 1) * 21%), 12%);
  color: hsl(0, calc(var(--saturation-factor, 1) * 54%), 60%);
}

Theme-specific selectors

Discord has light and dark theme classes:

/* Dark theme only */
.theme-dark {
  --background-primary: #1a1a1a;
}

/* Light theme only */
.theme-light {
  --background-primary: #f5f5f5;
}

/* Both themes */
.theme-dark,
.theme-light {
  --custom-variable: #ff0000;
}

Advanced techniques

Using HSL for dynamic colors

Discord uses HSL with saturation factors:

:root {
  --saturation-factor: 1;
  --custom-hsl: 220, 50%, 50%;
}

.element {
  background-color: hsl(
    var(--custom-hsl),
    calc(var(--saturation-factor) * 0.8)
  );
}

Backdrop filters

Create glassmorphism effects:

[class*="container_"] {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

Transitions and animations

/* Smooth transitions */
[class*="channel_"] {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

[class*="channel_"]:hover {
  transform: translateX(4px);
}

/* Keyframe animations */
@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

[class*="message_"] {
  animation: slideIn 0.3s ease;
}

Custom fonts

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --font-primary: 'Poppins', sans-serif;
}

body {
  font-family: var(--font-primary);
}

Common patterns

Rounded corners everywhere

[class*="container_"],
[class*="wrapper_"],
[class*="content_"] {
  border-radius: 12px;
}

Accent color system

:root {
  --accent: #ff6b6b;
  --accent-hover: #ff5252;
  --accent-active: #ff3838;
}

[class*="modeSelected_"],
[class*="selected_"],
.bd-selected {
  background-color: var(--accent) !important;
}

Minimalist borders

[class*="divider_"],
[class*="separator_"] {
  border-color: rgba(255, 255, 255, 0.05);
}

Next steps

Best practices

Learn how to create optimized, maintainable themes

Getting started

Start creating your first theme