240db4e2a7
Some checks failed
Server CI / Postgres (shard 0) (push) Has been skipped
Server CI / Postgres (shard 3) (push) Has been skipped
BuildEnv Docker Image / build-image (push) Failing after 4s
BuildEnv Docker Image / build-image-fips (push) Failing after 4s
Migration Review & Release Notes / Generate migration review & release notes (push) Failing after 3s
Server CI / Build Environment (push) Failing after 3s
Server CI / Postgres (shard 1) (push) Has been skipped
Tools CI / check-style (mattermost-govet) (push) Failing after 4s
Server CI / Postgres (shard 2) (push) Has been skipped
Tools CI / check-style (mmgotool) (push) Failing after 3s
Server CI / Elasticsearch v8 Compatibility (push) Has been skipped
Server CI / OpenSearch v2 Compatibility (push) Has been skipped
Server CI / Postgres FIPS (shard 0) (push) Has been skipped
Tools CI / Test (mattermost-govet) (push) Failing after 3s
Server CI / Postgres FIPS (shard 1) (push) Has been skipped
Server CI / Postgres FIPS (shard 2) (push) Has been skipped
Tools CI / Test (mmgotool) (push) Failing after 3s
Server CI / Postgres FIPS (shard 3) (push) Has been skipped
Server CI / Run mmctl tests (push) Has been skipped
Server CI / Run mmctl tests (FIPS) (push) Has been skipped
Server CI / Merge Postgres Test Results (push) Has been skipped
Server CI / Merge Postgres FIPS Test Results (push) Has been skipped
Server CI / Check backport migrations (push) Has been skipped
Server CI / Check generated files (push) Has been skipped
Server CI / check-style (push) Has been skipped
Server CI / Vet API (push) Has been skipped
Server CI / Build mattermost server app (push) Has been skipped
Server CI / Server CI Complete (push) Failing after 2s
Server CI / Server CI Artifacts (push) Has been skipped
Server CI / Sentry Upload (push) Has been skipped
Server CI / Server CI Report (push) Failing after 5m1s
Server CI Nightly Race / Race Detector (push) Has been skipped
CodeQL / Analyze (go) (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
Webapp CI Cache Warm / Warm Webapp node_modules Cache (push) Has been cancelled
E2E CI Cache Warm / Warm E2E npm Registry Cache (push) Has been cancelled
API / build (push) Has been cancelled
Web App CI / check-types (push) Has been cancelled
Web App CI / check-lint (push) Has been cancelled
Web App CI / check-i18n (push) Has been cancelled
Web App CI / check-external-links (push) Has been cancelled
Web App CI / test (platform) (push) Has been cancelled
Web App CI / test (mattermost-redux) (push) Has been cancelled
Web App CI / test (channels shard 1/4) (push) Has been cancelled
Web App CI / test (channels shard 2/4) (push) Has been cancelled
Web App CI / test (channels shard 3/4) (push) Has been cancelled
Web App CI / test (channels shard 4/4) (push) Has been cancelled
Web App CI / upload-coverage (push) Has been cancelled
Web App CI / build (push) Has been cancelled
YAML Lint / yamllint (push) Has been cancelled
Push mirrored docker images / cd/Push mirrored docker images (push) Has been cancelled
docs-cd / Build and deploy docs (push) Has been cancelled
Docs CI / build (push) Has been cancelled
E2E Cache Warm: Cypress deps / Warm Cypress deps cache (push) Has been cancelled
Scorecards supply-chain security / Scorecard analysis (push) Has been cancelled
Server CI Weekly / Postgres FIPS (push) Has been skipped
Server CI Weekly / Run mmctl tests (FIPS) (push) Has been skipped
Server CI Weekly / Postgres with binary parameters (push) Has been skipped
Server CI Weekly / Build Environment (push) Failing after 1s
Server CI Cache Warm / Warm Go Module and Build Cache (push) Failing after 2s
Server CI Nightly Race / Build Environment (push) Failing after 1s
267 lines
16 KiB
Plaintext
267 lines
16 KiB
Plaintext
---
|
|
title: "Customize your Mattermost theme"
|
|
---
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
<PlanAvailability slug="all-commercial" />
|
|
|
|
The colors of the Mattermost user interface are customizable. You can choose from [five standard themes](#standard-themes) designed by Mattermost, or design your own custom theme. Your theme changes apply to all teams you're a member of, and are visible across all Mattermost clients. Mattermost Enterprise customers can configure a different theme for every team they're a member of.
|
|
|
|
<Tabs>
|
|
<TabItem value="web-desktop" label="Web/desktop">
|
|
|
|
Select the **Settings** <img src={useBaseUrl('/img/ui/settings-outline_F08BB.svg')} alt="Use the Settings icon to customize your Mattermost user experience." className="theme-icon" /> icon, then go to **Display \> Theme**. Select **Theme Colors** to choose from five standard themes designed by the Mattermost team.
|
|
|
|
You can customize a standard theme further to truly make it your own. After selecting a standard theme, select **Custom Theme** and modify your color choices based on your preferences. See the [custom themes](#custom-themes) documentation to learn what's configurable, and see the [custom theme examples](#custom-theme-examples) documentation for inspiration.
|
|
|
|
</TabItem>
|
|
<TabItem value="mobile" label="Mobile">
|
|
|
|
Tap **Theme** to select one of 5 standard Mattermost themes.
|
|
|
|
<Note>
|
|
|
|
You can define a custom theme using Mattermost in a web browser or the desktop app.
|
|
|
|
</Note>
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
|
|
## Custom themes
|
|
|
|
Select **Custom Theme**, then expand the [Sidebar Styles](/end-user-guide/preferences/customize-your-theme#sidebar-styles), [Center Channel Styles](/end-user-guide/preferences/customize-your-theme#center-channel-styles), and [Link and Button Styles](/end-user-guide/preferences/customize-your-theme#link-and-button-styles) options to customize individual interface colors, such as backgrounds, links, text, and borders.
|
|
|
|
Your custom theme changes are applied in Mattermost as you make them. Select **Save** to confirm your theme changes. Discard your changes by exiting the **Display Settings** window and selecting **Yes, Discard**.
|
|
|
|
### Custom theme examples
|
|
|
|
Customize your theme colors and share them with others by copying and pasting theme values into the input box. Below are some example themes with their corresponding theme values.
|
|
|
|
#### Mattermost
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#145dbf","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#4578bf","sidebarTextActiveBorder":"#579eff","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1153ab","sidebarTeamBarBg":"#0b428c","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#06d6a0","awayIndicator":"#ffbc42","dndIndicator":"#f74343","mentionBg":"#ffffff","mentionBj":"#ffffff","mentionColor":"#145dbf","centerChannelBg":"#ffffff","centerChannelColor":"#3d3c40","newMessageSeparator":"#ff8800","linkColor":"#2389d7","buttonBg":"#166de0","buttonColor":"#ffffff","errorTextColor":"#fd5960","mentionHighlightBg":"#ffe577","mentionHighlightLink":"#166de0","codeTheme":"github"}
|
|
```
|
|
|
|
#### Organization
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#2071a7","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#136197","sidebarTextActiveBorder":"#7ab0d6","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#2f81b7","sidebarTeamBarBg":"#256996","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#7dbe00","awayIndicator":"#dcbd4e","dndIndicator":"#ff6a6a","mentionBg":"#fbfbfb","mentionColor":"#2071f7","centerChannelBg":"#f2f4f8","centerChannelColor":"#333333","newMessageSeparator":"#ff8800","linkColor":"#2f81b7","buttonBg":"#1dacfc","buttonColor":"#ffffff","errorTextColor":"#a94442","mentionHighlightBg":"#f3e197","mentionHighlightLink":"#2f81b7","codeTheme":"github"}
|
|
```
|
|
|
|
#### Mattermost Dark
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#1b2c3e","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#4a5664","sidebarTextActiveBorder":"#66b9a7","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1b2c3e","sidebarTeamBarBg":"#152231","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#65dcc8","awayIndicator":"#c1b966","dndIndicator":"#e81023","mentionBg":"#b74a4a","mentionColor":"#ffffff","centerChannelBg":"#2f3e4e","centerChannelColor":"#dddddd","newMessageSeparator":"#5de5da","linkColor":"#a4ffeb","buttonBg":"#4cbba4","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#984063","mentionHighlightLink":"#a4ffeb","codeTheme":"solarized-dark"}
|
|
```
|
|
|
|
#### Windows Dark
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#171717","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#302e30","sidebarTextActiveBorder":"#196caf","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1f1f1f","sidebarTeamBarBg":"#181818","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#399fff","awayIndicator":"#c1b966","dndIndicator":"#e81023","mentionBg":"#0177e7","mentionColor":"#ffffff","centerChannelBg":"#1f1f1f","centerChannelColor":"#dddddd","newMessageSeparator":"#cc992d","linkColor":"#0d93ff","buttonBg":"#0177e7","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#784098","mentionHighlightLink":"#a4ffeb","codeTheme":"monokai"}
|
|
```
|
|
|
|
#### GitHub Theme
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"awayIndicator":"#D4B579","buttonBg":"#66CCCC","buttonColor":"#FFFFFF","centerChannelBg":"#FFFFFF","centerChannelColor":"#444444","codeTheme":"github","linkColor":"#3DADAD","mentionBg":"#66CCCC","mentionColor":"#FFFFFF","mentionHighlightBg":"#3DADAD","mentionHighlightLink":"#FFFFFF","newMessageSeparator":"#F2777A","onlineIndicator":"#52ADAD","sidebarBg":"#F2F0EC","sidebarHeaderBg":"#E8E6DF","sidebarHeaderTextColor":"#424242","sidebarText":"#2E2E2E","sidebarTextActiveBorder":"#66CCCC","sidebarTextActiveColor":"#594545","sidebarTextHoverBg":"#E0E0E0","sidebarUnreadText":"#515151"}
|
|
```
|
|
|
|
#### Monokai Theme
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"awayIndicator":"#B8B884","buttonBg":"#90AD58","buttonColor":"#FFFFFF","centerChannelBg":"#FFFFFF","centerChannelColor":"#444444","codeTheme":"monokai","linkColor":"#90AD58","mentionBg":"#7E9949","mentionColor":"#FFFFFF","mentionHighlightBg":"#54850C","mentionHighlightLink":"#FFFFFF","newMessageSeparator":"#90AD58","onlineIndicator":"#99CB3F","sidebarBg":"#262626","sidebarHeaderBg":"#363636","sidebarHeaderTextColor":"#FFFFFF","sidebarText":"#FFFFFF","sidebarTextActiveBorder":"#7E9949","sidebarTextActiveColor":"#FFFFFF","sidebarTextHoverBg":"#525252","sidebarUnreadText":"#CCCCCC"}
|
|
```
|
|
|
|
#### Solarized Dark Theme
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"awayIndicator":"#E0B333","buttonBg":"#859900","buttonColor":"#fdf6e3","centerChannelBg":"#073642","centerChannelColor":"#93a1a1","codeTheme":"solarized-dark","linkColor":"#268bd2","mentionBg":"#dc322f","mentionColor":"#ffffff","mentionHighlightBg":"#d33682","mentionHighlightLink":"#268bd2","newMessageSeparator":"#cb4b16","onlineIndicator":"#2AA198","sidebarBg":"#073642","sidebarHeaderBg":"#002B36","sidebarHeaderTextColor":"#FDF6E3","sidebarText":"#FDF6E3","sidebarTextActiveBorder":"#d33682","sidebarTextActiveColor":"#FDF6E3","sidebarTextHoverBg":"#CB4B16","sidebarUnreadText":"#FDF6E3","errorTextColor":"#dc322f"}
|
|
```
|
|
|
|
#### Gruvbox Dark Theme
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"awayIndicator":"#fabd2f","buttonBg":"#689d6a","buttonColor":"#ebdbb2","centerChannelBg":"#3c3836","centerChannelColor":"#ebdbb2","codeTheme":"monokai","errorTextColor":"#fb4934","linkColor":"#83a598","mentionBg":"#b16286","mentionColor":"#fbf1c7","mentionHighlightBg":"#d65d0e","mentionHighlightLink":"#fbf1c7","newMessageSeparator":"#d65d0e","onlineIndicator":"#b8bb26","sidebarBg":"#282828","sidebarHeaderBg":"#1d2021","sidebarHeaderTextColor":"#ebdbb2","sidebarText":"#ebdbb2","sidebarTextActiveBorder":"#d65d0e","sidebarTextActiveColor":"#fbf1c7","sidebarTextHoverBg":"#d65d0e","sidebarUnreadText":"#fe8019"}
|
|
```
|
|
|
|
#### One Dark Theme
|
|
|
|
|
|
|
|
[Visit the one-dark-mattermost GitHub repository online:](https://github.com/georgewitteman/one-dark-mattermost)
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#21252b","sidebarText":"#abb2bf","sidebarUnreadText":"#abb2bf","sidebarTextHoverBg":"#3a3f4b","sidebarTextActiveBorder":"#4d78cc","sidebarTextActiveColor":"#d7dae0","sidebarHeaderBg":"#282c34","sidebarHeaderTextColor":"#abb2bf","onlineIndicator":"#98c379","awayIndicator":"#d19a66","dndIndicator":"#be5046","mentionBg":"#98c379","mentionColor":"#ffffff","centerChannelBg":"#282c34","centerChannelColor":"#abb2bf","newMessageSeparator":"#c67add","linkColor":"#61afef","buttonBg":"#4d78cc","buttonColor":"#ffffff","errorTextColor":"#f44747","mentionHighlightBg":"#525a69","mentionHighlightLink":"#61afef","codeTheme":"monokai","mentionBg":"#98c379"}
|
|
```
|
|
|
|
#### Discord Dark Theme (New)
|
|
|
|
|
|
|
|
[Visit the mattermost-discord-dark GitHub repository online:](https://github.com/melroy89/mattermost-discord-dark)
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg": "#121214", "sidebarText": "#ffffff", "sidebarUnreadText": "#ffffff", "sidebarTextHoverBg": "#1d1d1e", "sidebarTextActiveBorder": "#ffffff", "sidebarTextActiveColor": "#ffffff", "sidebarHeaderBg": "#121214", "sidebarHeaderTextColor": "#ffffff", "sidebarTeamBarBg": "#121214", "onlineIndicator": "#43a25a", "awayIndicator": "#ca9654", "dndIndicator": "#d83a42", "mentionBg": "#6e84d2", "mentionBj": "#6e84d2", "mentionColor": "#ffffff", "centerChannelBg": "#1a1a1e", "centerChannelColor": "#efeff0", "newMessageSeparator": "#ff4d4d", "linkColor": "#2095e8", "buttonBg": "#5865f2", "buttonColor": "#ffffff", "errorTextColor": "#ff6461", "mentionHighlightBg": "#a4850f", "mentionHighlightLink": "#a4850f", "codeTheme": "monokai"}
|
|
```
|
|
|
|
#### Discord Dark Theme (Old)
|
|
|
|
|
|
|
|
[Visit the mattermost-discord-dark-old GitHub repository online:](https://github.com/melroy89/mattermost-discord-dark)
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#2f3136","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#33363c","sidebarTextActiveBorder":"#66cfa0","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#27292c","sidebarHeaderTextColor":"#ffffff","onlineIndicator":"#43b581","awayIndicator":"#faa61a","dndIndicator":"#f04747","mentionBg":"#6e84d2","mentionBg":"#6e84d2","mentionColor":"#ffffff","centerChannelBg":"#36393f","centerChannelColor":"#dddddd","newMessageSeparator":"#6e84d2","linkColor":"#2095e8","buttonBg":"#43b581","buttonColor":"#ffffff","errorTextColor":"#ff6461","mentionHighlightBg":"#3d414f","mentionHighlightLink":"#6e84d2","codeTheme":"monokai"}
|
|
```
|
|
|
|
#### Night Owl Dark Theme
|
|
|
|
|
|
|
|
Want this theme? Copy and paste the following code into Mattermost:
|
|
|
|
``` json
|
|
{"sidebarBg":"#011627","sidebarText":"#d6deeb","sidebarUnreadText":"#d6deeb","sidebarTextHoverBg":"#1d3b53","sidebarTextActiveBorder":"#ff2c83","sidebarTextActiveColor":"#82aaff","sidebarHeaderBg":"#1d3b53","sidebarHeaderTextColor":"#d6deeb","onlineIndicator":"#addb67","awayIndicator":"#ffbc42","dndIndicator":"#f74343","mentionBg":"#d6deeb","mentionBg":"#d6deeb","mentionColor":"#145dbf","centerChannelBg":"#011627","centerChannelColor":"#d6deeb","newMessageSeparator":"#ff8800","linkColor":"#2389d7","buttonBg":"#166de0","buttonColor":"#011627","errorTextColor":"#fd5960","mentionHighlightBg":"#0b2942","mentionHighlightLink":"#82aaff","codeTheme":"solarized-dark"}
|
|
```
|
|
|
|
#### Dark Theme (desktop app only)
|
|
|
|
On Windows and macOS, the system display preference that you set on your computer (e.g., Light Mode or Dark Mode) is also applied to the Mattermost desktop app. On Linux, manage this manually via the **View** menu.
|
|
|
|
|
|
|
|
### Export your custom theme
|
|
|
|
Export a theme from Mattermost by copying the theme values from the Custom Theme menu.
|
|
|
|
### Import a custom theme
|
|
|
|
Import a theme into Mattermost by pasting the theme values into the Custom Theme menu. Copy existing theme values, then paste the theme values into the **Copy and paste to share theme colors** field. Select **Save** to confirm your theme changes.
|
|
|
|
### Sidebar styles
|
|
|
|
You can customize every aspect of your Mattermost theme, as described below:
|
|
|
|
Sidebar BG
|
|
Background color of the Channels pane, and Account and Team settings navigation sidebars.
|
|
|
|
Sidebar Text
|
|
Text color of read channels in the Channels pane, and tabs in the Account and Team settings navigation sidebar.
|
|
|
|
Sidebar Header BG
|
|
Background color of the header above the Channels pane and all dialog window headers.
|
|
|
|
Team Sidebar BG
|
|
Background color of the Global Header.
|
|
|
|
Sidebar Header Text
|
|
Text color of the header above the Channels pane and all dialog window headers.
|
|
|
|
Sidebar Unread Text
|
|
Text color of unread channels in the Channels pane.
|
|
|
|
Sidebar Text Hover BG
|
|
Background color behind channel names and settings tabs as you hover over them.
|
|
|
|
Sidebar Text Active Border
|
|
Color of the rectangular marker on the left side of the Channels pane or Settings sidebar indicating the active channel or tab.
|
|
|
|
Sidebar Text Active Color
|
|
Text color of the active channel or tab in the Channels pane or Settings sidebar.
|
|
|
|
Online Indicator
|
|
Color of the online indicator appearing next to team members names in the direct messages list.
|
|
|
|
Away Indicator
|
|
Color of the away indicator appearing next to team members names in the direct messages list when they have had no browser activity for 5 minutes.
|
|
|
|
Do Not Disturb Indicator
|
|
Color of the do not disturb indicator appearing next to team members names in the direct messages list.
|
|
|
|
Mention Jewel BG
|
|
Background color of the jewel indicating unread mentions that appears to the right of the channel name. This is also the background color of the “Unread Posts Below/Above” indicator appearing at the top or bottom of the Channels pane on shorter browser windows.
|
|
|
|
Mention Jewel Text
|
|
Text color on the mention jewel indicating the number of unread mentions. This is also the text color on the “Unread Posts Below/Above” indicator.
|
|
|
|
### Center channel styles
|
|
|
|
You can customize every aspect of your Mattermost theme, as described below:
|
|
|
|
Center Channel BG
|
|
Color of the center pane, right-hand sidebar and all dialog window backgrounds.
|
|
|
|
Center Channel Text
|
|
Color of all the text - with the exception of mentions, links, hashtags and code blocks - in the center pane, right-hand sidebar, and dialogs.
|
|
|
|
New Message Separator
|
|
The new message separator appears below the last read message when you navigate to a channel with unread messages.
|
|
|
|
Error Text Color
|
|
Color of all error text.
|
|
|
|
Mention Highlight BG
|
|
Highlight color behind your words that trigger mentions in the center pane and right-hand sidebar.
|
|
|
|
Mention Highlight Link
|
|
Text color of your words that trigger mentions in the center pane and right-hand sidebar.
|
|
|
|
Code Theme
|
|
Background and syntax colors for all code blocks.
|
|
|
|
### Link and button styles
|
|
|
|
You can customize every aspect of your Mattermost theme, as described below:
|
|
|
|
Link Color
|
|
Text color of all links, hashtags, teammate mentions, and low priority UI buttons.
|
|
|
|
Button BG
|
|
Color of the rectangular background behind all high priority UI buttons.
|
|
|
|
Button Text
|
|
Text color appearing on the rectangular background for all high priority UI buttons.
|