🔶 Mattermost Theme Editor

A self-contained, zero-dependency HTML tool for building and previewing custom Mattermost themes. Tweak colors visually, see the result instantly, and copy the finished JSON string straight into Mattermost.

---

Features

• Live preview — sidebar, top bar, channels, badges, messages and status indicators update in real time
• Color pickers — click any swatch to open a native color wheel; every UI element has its own picker
• Hex inputs — type a hex value directly next to any picker; the preview updates on every keystroke
• Editable JSON — the theme string textarea is fully editable; paste an existing theme and the pickers sync instantly
• Two-way binding — pickers → JSON and JSON → pickers always stay in sync
• Valid / invalid indicator — a status badge shows whether the current JSON is parseable
• Reset button — restores all colors to the default orange theme in one click
• Copy button — copies the ready-to-paste theme string to your clipboard
• Step-by-step instructions — built-in guide for applying the theme inside Mattermost
• Zero dependencies — single HTML file, no framework, no build step, no network requests

---

Usage

Option A — open directly in a browser

Download mattermost-orange-theme.html and open it in any modern browser. No server required.

# clone or download, then:
open mattermost-orange-theme.html        # macOS
start mattermost-orange-theme.html       # Windows
xdg-open mattermost-orange-theme.html   # Linux

Option B — serve locally

npx serve .
# or
python3 -m http.server 8080

Then visit http://localhost:8080/mattermost-orange-theme.html.

---

Applying your theme in Mattermost

1. Copy the JSON string using the Copy button in the editor
2. In Mattermost, click your profile picture → Settings
3. Navigate to Display → Theme
4. Select Custom Theme
5. Click Import theme colors, paste the JSON, then click Save

Note: on some versions the path is Account Settings → Display → Theme → Custom Theme.

---

Theme keys

The editor covers all standard Mattermost custom theme keys (camelCase format):

Key	Description
sidebarBg	Sidebar background
sidebarText	Channel / DM list text
sidebarUnreadText	Unread channel text
sidebarTextHoverBg	Channel row hover background
sidebarTextActiveBorder	Active channel left border
sidebarTextActiveColor	Active channel text
sidebarHeaderBg	Sidebar header & top bar background
sidebarHeaderTextColor	Sidebar header text
sidebarTeamBarBg	Team icon bar background
onlineIndicator	Online presence dot
awayIndicator	Away presence dot
dndIndicator	Do Not Disturb presence dot
mentionBg	Mention badge background
mentionColor	Mention badge text
mentionHighlightBg	Mention highlight background in messages
mentionHighlightLink	Mention highlight link color
centerChannelBg	Message area background
centerChannelColor	Message area text
newMessageSeparator	"New Messages" divider line
linkColor	Hyperlink color
buttonBg	Primary button background
buttonColor	Primary button text
errorTextColor	Error message text

The exported JSON also includes the required mentionBj alias (identical to mentionBg) and codeTheme: "github".

---

Default orange theme

The editor ships with an orange theme preset:

{
  "sidebarBg": "#C45B00",
  "sidebarText": "#FFE8D6",
  "sidebarUnreadText": "#FFFFFF",
  "sidebarTextHoverBg": "#c0732a",
  "sidebarTextActiveBorder": "#FF9A45",
  "sidebarTextActiveColor": "#FFFFFF",
  "sidebarHeaderBg": "#A34E00",
  "sidebarHeaderTextColor": "#FFFFFF",
  "sidebarTeamBarBg": "#9f7956",
  "onlineIndicator": "#3db887",
  "awayIndicator": "#ffbc1f",
  "dndIndicator": "#d24b4e",
  "mentionBg": "#FF9A45",
  "mentionBj": "#FF9A45",
  "mentionColor": "#FFFFFF",
  "centerChannelBg": "#FFFFFF",
  "centerChannelColor": "#3f4350",
  "newMessageSeparator": "#FF7B00",
  "linkColor": "#C45B00",
  "buttonBg": "#C45B00",
  "buttonColor": "#FFFFFF",
  "errorTextColor": "#d24b4e",
  "mentionHighlightBg": "#FFE0B2",
  "mentionHighlightLink": "#C45B00",
  "codeTheme": "github"
}

---

Browser support

Any modern browser with support for <input type="color"> and the Clipboard API — Chrome 66+, Firefox 63+, Safari 13+, Edge 79+.

---

License

MIT