Skip to main content

​
The shape of a theme

A theme definition has three parts that decide its colors: a base type, a set of semantic colors, and a set of raw colors. Together they override Discord’s palette. 
{
	type: 'darker',
	semantic: { /* ... */ },
	raw: { /* ... */ },
	background: { /* optional, see Backgrounds */ },
}

​
Base type

type picks the foundation your theme builds on. You only override the colors you care about, and everything else falls back to this base.
A pure-black base, for OLED/AMOLED-style themes.

​
Semantic colors

Semantic colors are Discord’s named roles: BACKGROUND_PRIMARY, TEXT_NORMAL, and so on. Theming by role means a single value recolors everywhere that role is used, so the result stays consistent across the app. Each entry is an object: a type of color (a literal color) or raw (a reference to a raw color), the value, and an optional opacity. 
semantic: {
	BACKGROUND_PRIMARY: { type: 'color', value: '#0c0c0c' },
	TEXT_NORMAL:        { type: 'color', value: '#fcfcfc', opacity: 1 },
}
​
type
'color' | 'raw'
color is a literal value; raw points at one of your raw colors so many roles can share it.
​
value
string
The color, or the raw key when type is raw.
​
opacity
number
Optional opacity applied to the color.

​
Raw colors

Raw colors are a flat map of your own named values: your palette’s source of truth. Define a color once here, then point semantic roles at it with type: 'raw'. Change the raw value and every role referencing it updates together. 
raw: {
	ACCENT: '#c74050',
}
// ...then reference it:
semantic: {
	BUTTON_BACKGROUND: { type: 'raw', value: 'ACCENT' },
}
Put your brand colors in raw and wire semantic roles to them. It keeps a theme DRY, so one edit recolors everything that shares a value.