Share your favorite Mattermost theme colors

Announcements
1

Mattermost offers 21 options for customizing theme colors, plus the ability to export and import themes to share with others.

The Mattermost core team is starting this discussion topic for you to share your favorite themes with the community by replying to this post with the theme code and a screenshot. Everyone who posts has a chance to have their theme added to the Mattermost open source project as a preset theme, which earns them a limited edition Mattermost mug.

Here’s how:

  1. Create a custom theme: On your Mattermost instance, go to Account Settings > Display > Theme > Custom Theme and set the sidebar styles, center channel styles, and link and button styles.
  2. Copy your theme code: Copy the theme code shown in the text box after you’ve chosen your custom theme colors.
  3. Screenshot your theme: Use the Snipping Tool on Windows or Grab on a Mac to capture and copy a screenshot of your theme.
  4. Reply here with your screenshot and theme code: Paste the screenshot and then your theme code in a reply to this post.

Try out the themes posted here by copying the code and pasting it into the theme code box in Account Settings > Display > Theme > Custom Theme.

2 Likes
2

Pink Theme!

#f8f8fa,#383F45,#f6dbe9,#383f45,#383f45,#FFFFFF,#f51a76,#f51a76,#60D156,#ff8669,#ff8669,#ffffff,#ffffff,#333333,#f51a76,#fbffcf,#f51a76,#f51a76,#fc6d90,#ffffff,github

1 Like
3

Orange and Dark Green!

#151515,#ffb964,#2e4500,#ffffff,#70b950,#1e2809,#1a5c03,#f4af3c,#00ff29,#f56b0a,#59f515,#ffffff,#151515,#ffb964,#1b09ed,#16430c,#99ad6a,#eede83,#70b950,#FFFFFF,solarized-dark

Edit: Fixed theme for new theme options.

1 Like
4

:ocean: oceanish

For newer versions of mattermost (tested on 2.1 and 2.2)

#1c2124,#c0c5ce,#1c2124,#868686,#dfe1e8,#4A5664,#99c794,#dfe1e8,#99c794,#1b2b34,#dfe1e8,#1b2b34,#1b2b34,#cdd3de,#5de5da,#515a65,#cdd3de,#99c794,#1a4666,#dfe1e8,solarized-dark

For older versions of mattermost (tested on 1.4)

#1c2124,#c0c5ce,#1c2124,#868686,#dfe1e8,#4A5664,#99c794,#dfe1e8,#99c794,#1b2b34,#dfe1e8,#1b2b34,#cdd3de,#5de5da,#99c794,#1a4666,#dfe1e8,#515a65,#cdd3de,solarized_dark

1 Like
5

Gitlab like theme

#2b333d,#ffffff,#333c47,#c5d0de,#c5d0de,#24272d,#24272d,#c5d0de,#26a970,#E0B333,#24272d,#ffffff,#faf9f9,#3d3f44,#F80,#fff2bb,#3084bb,#3084bb,#26a970,#ffffff,github

1 Like
6

Red wine :slight_smile:

#f8f8fa,#383F45,#b52127,#ffffff,#383f45,#FFFFFF,#b52127,#b52127,#60D156,#dcbd4e,#b52127,#ffffff,#ffffff,#333333,#b52127,#fff2bb,#b52127,#b52127,#b52127,#ffffff,github

2 Likes
8

Mattermost themes from cronn

cronn The Light Side:
#262626,#ffffff,#363636,#19cb3f,#ffffff,#525252,#10ad58,#ffffff,#19cb3f,#c9c9c9,#1e9949,#ffffff,#ffffff,#444444,#10ad58,#dfffdd,#1e9949,#444444,#10ad58,#ffffff,github

cronn The Dark Side:
#262626,#ffffff,#363636,#19cb3f,#ffffff,#525252,#10ad58,#ffffff,#19cb3f,#c9c9c9,#1e9949,#ffffff,#454343,#e5e5e5,#10ad58,#dfffdd,#27a854,#444444,#10ad58,#ffffff,monokai

9

Dapper

{“awayIndicator”:"#d4b66a",“buttonBg”:"#525c91",“buttonColor”:"#ffffff",“centerChannelBg”:"#f2f4f8",“centerChannelColor”:"#333333",“codeTheme”:“solarized-dark”,“linkColor”:"#5263c4",“mentionBj”:"#FBFBFB",“mentionColor”:"#d4b66a",“mentionHighlightBg”:"#fff2bb",“mentionHighlightLink”:"#2f81b7",“newMessageSeparator”:"#FF8800",“onlineIndicator”:"#7DBE00",“sidebarBg”:"#476350",“sidebarHeaderBg”:"#787357",“sidebarHeaderTextColor”:"#FFFFFF",“sidebarText”:"#fff",“sidebarTextActiveBorder”:"#ffe7aa",“sidebarTextActiveColor”:"#FFFFFF",“sidebarTextHoverBg”:"#70967c",“sidebarUnreadText”:"#fff"}

1 Like
10

I like it @neale! :smiley:

12

Thanks for sharing great article. I found the article useful for taking screenshot using snipping tool mac.

13

Hey guys! I am new to Mattermost and to these forums, but as soon I found out about you and deployed my Mattermost server I fell in love with it. I was using Discord before and I am really used to the colors of Discord’s dark theme. So I adapted the theme to Mattermost and now it is perfect for me! So I want to share it with you guys:

mm_discord

{
  "sidebarBg":"#2F3136",
  "sidebarText":"#9ca0a4",
  "sidebarUnreadText":"#ffffff",
  "sidebarTextHoverBg":"#42464D",
  "sidebarTextActiveBorder":"#42464D",
  "sidebarTextActiveColor":"#ffffff",
  "sidebarHeaderBg":"#282B30",
  "sidebarHeaderTextColor":"#ffffff",
  "onlineIndicator":"#43B581",
  "awayIndicator":"#FAA61A",
  "mentionBj":"#F04747",
  "mentionColor":"#ffffff",
  "centerChannelBg":"#36393E",
  "centerChannelColor":"#C0C1C2",
  "newMessageSeparator":"#CB4445",
  "linkColor":"#7289DA",
  "buttonBg":"#7289DA",
  "buttonColor":"#ffffff",
  "mentionHighlightBg":"#3D414E",
  "mentionHighlightLink":"#7289DA",
  "codeTheme":"monokai"
}

Ofcourse it’s not 1:1 because it didn’t look good with the original colors so I had to do some minor modifications and now everything is readable. Hope you like it as I do!

6 Likes
14

That looks great @mantas! I’m going to try it out :slight_smile:

1 Like
15

Exactly what I hoped to find in coming here, @mantas. Thank you!!

1 Like
16

This is with the wonka colors (https://github.com/nightsense/wonka)

{
"sidebarBg":"#f0e6dd",
"sidebarText":"#2b241d",
"sidebarUnreadText":"#468dd4",
"sidebarTextHoverBg":"#fff7f0",
"sidebarTextActiveBorder":"#ab8e38",
"sidebarTextActiveColor":"#ab8e38",
"sidebarHeaderBg":"#b5aca3",
"sidebarHeaderTextColor":"#2b241d",
"onlineIndicator":"#a2ec14",
"awayIndicator":"#dcbd4e",
"dndIndicator":"#fd0000",
"mentionBj":"#a26fbf",
"mentionColor":"#ffffff",
"centerChannelBg":"#fff7f0",
"centerChannelColor":"#2b241d",
"newMessageSeparator":"#ff8800",
"linkColor":"#d4ac35",
"buttonBg":"#d4ac35",
"buttonColor":"#ffffff",
"errorTextColor":"#a94442",
"mentionHighlightBg":"#f0e6dd",
"mentionHighlightLink":"#3b332c",
"codeTheme":"solarized-light",
"mentionBg":"#a26fbf"
}
17


screenshot
screenshot.png1958×1102 339 KB 

{
  "sidebarBg":"#21252b",
  "sidebarText":"#abb2bf",
  "sidebarUnreadText":"#abb2bf",
  "sidebarTextHoverBg":"#3a3f4b",
  "sidebarTextActiveBorder":"#4d78cc",
  "sidebarTextActiveColor":"#d7dae0",
  "sidebarHeaderBg":"#282c34",
  "sidebarHeaderTextColor":"#abb2bf",
  "onlineIndicator":"#98c379",
  "awayIndicator":"#d19a66",
  "dndIndicator":"#be5046",
  "mentionBj":"#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"
}
1 Like
18

28%20AM
Screen Shot 2019-07-12 at 11.01.28 AM.png1015×605 87.7 KB

Code
{“sidebarBg”:"#001e27",“sidebarText”:"#8ae9ff",“sidebarUnreadText”:"#1fbfec",“sidebarTextHoverBg”:"#1a5c70",“sidebarTextActiveBorder”:"#00c463",“sidebarTextActiveColor”:"#00c463",“sidebarHeaderBg”:"#001e27",“sidebarHeaderTextColor”:"#1fbfec",“onlineIndicator”:"#00c463",“awayIndicator”:"#e86a31",“dndIndicator”:"#dd2c45",“mentionBj”:"#00c463",“mentionColor”:"#001e27",“centerChannelBg”:"#011010",“centerChannelColor”:"#1fbfec",“newMessageSeparator”:"#146c86",“linkColor”:"#00aa55",“buttonBg”:"#00aa55",“buttonColor”:"#041418",“errorTextColor”:"#dd2c45",“mentionHighlightBg”:"#032727",“mentionHighlightLink”:"#146c86",“codeTheme”:“solarized-dark”,“mentionBg”:"#00c463”}

1 Like
19

this code does not work in Mattermost. every other posted code here worked

20

{"sidebarBg":"#001e27","sidebarText":"#8ae9ff","sidebarUnreadText":"#1fbfec","sidebarTextHoverBg":"#3a3f4b","sidebarTextActiveBorder":"#00c463","sidebarTextActiveColor":"#00c463","sidebarHeaderBg":"#001e27","sidebarHeaderTextColor":"#1fbfec","onlineIndicator":"#00c463","awayIndicator":"#e86a31","dndIndicator":"#dd2c45","mentionBj":"#00c463","mentionColor":"#001e27","centerChannelBg":"#011010","centerChannelColor":"#1fbfec","newMessageSeparator":"#146c86","linkColor":"#00aa55","buttonBg":"#00aa55","buttonColor":"#041418","errorTextColor":"#dd2c45","mentionHighlightBg":"#032727","mentionHighlightLink":"#146c86","codeTheme":"solarized-dark","mentionBg":"#00c463"}

Not sure the issue, but I pasted the values into a working config, and levimluke’s theme should work now.

21

Reason it doesn’t work is special character quotes, commonly caused by Microsoft text processing products.