사용 가능 플랜: Entry, Professional, Enterprise, Enterprise Advanced

Mattermost 사용자 인터페이스의 색상을 커스터마이즈할 수 있습니다. Mattermost가 디자인한 5가지 표준 테마 중에서 선택하거나 직접 사용자 정의 테마를 디자인할 수 있습니다. 테마 변경 사항은 소속된 모든 팀에 적용되며 모든 Mattermost 클라이언트에서 표시됩니다. Mattermost Enterprise 고객은 소속된 각 팀마다 다른 테마를 구성할 수 있습니다.

사용자 정의 테마#

사용자 정의 테마 를 선택한 다음 사이드바 스타일, 중앙 채널 스타일, 링크 및 버튼 스타일 옵션을 펼쳐 배경, 링크, 텍스트, 테두리 등 개별 인터페이스 색상을 커스터마이즈합니다.

사용자 정의 테마 변경 사항은 변경하는 즉시 Mattermost에 적용됩니다. 저장 을 선택하여 테마 변경 사항을 확인합니다. 디스플레이 설정 창을 종료하고 예, 취소 를 선택하여 변경 사항을 취소합니다.

사용자 정의 테마 예시#

테마 값을 입력 상자에 복사하여 붙여넣어 테마 색상을 커스터마이즈하고 다른 사람과 공유합니다. 아래는 일부 예시 테마와 해당 테마 값입니다.

Mattermost#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

온라인에서 one-dark-mattermost GitHub 리포지터리 방문:

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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)#

온라인에서 mattermost-discord-dark GitHub 리포지터리 방문:

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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)#

온라인에서 mattermost-discord-dark-old GitHub 리포지터리 방문:

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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#

이 테마를 원하십니까? 다음 코드를 Mattermost에 복사하여 붙여넣으세요:

{"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 (데스크톱 앱 전용)#

Windows 및 macOS에서 컴퓨터에 설정한 시스템 디스플레이 기본 설정(예: 라이트 모드 또는 다크 모드)이 Mattermost 데스크톱 앱에도 적용됩니다. Linux에서는 보기 메뉴를 통해 수동으로 관리합니다.

사용자 정의 테마 내보내기#

사용자 정의 테마 메뉴에서 테마 값을 복사하여 Mattermost에서 테마를 내보냅니다.

사용자 정의 테마 가져오기#

테마 값을 사용자 정의 테마 메뉴에 붙여넣어 Mattermost로 테마를 가져옵니다. 기존 테마 값을 복사한 다음 테마 색상 복사 및 붙여넣기로 공유 필드에 테마 값을 붙여넣습니다. 저장 을 선택하여 테마 변경 사항을 확인합니다.

사이드바 스타일#

아래에 설명된 대로 Mattermost 테마의 모든 측면을 커스터마이즈할 수 있습니다:

사이드바 배경색(Sidebar BG)
채널 패널, 계정 및 팀 설정 탐색 사이드바의 배경 색상.

사이드바 텍스트(Sidebar Text)
채널 패널에서 읽은 채널의 텍스트 색상, 계정 및 팀 설정 탐색 사이드바의 탭 텍스트 색상.

사이드바 헤더 배경색(Sidebar Header BG)
채널 패널 위의 헤더와 모든 대화 창 헤더의 배경 색상.

팀 사이드바 배경색(Team Sidebar BG)
글로벌 헤더의 배경 색상.

사이드바 헤더 텍스트(Sidebar Header Text)
채널 패널 위의 헤더와 모든 대화 창 헤더의 텍스트 색상.

사이드바 읽지 않음 텍스트(Sidebar Unread Text)
채널 패널에서 읽지 않은 채널의 텍스트 색상.

사이드바 텍스트 호버 배경색(Sidebar Text Hover BG)
채널 이름과 설정 탭 위에 마우스를 올릴 때의 배경 색상.

사이드바 텍스트 활성 테두리(Sidebar Text Active Border)
활성 채널 또는 탭을 나타내는 채널 패널 또는 설정 사이드바 왼쪽의 직사각형 마커 색상.

사이드바 텍스트 활성 색상(Sidebar Text Active Color)
채널 패널 또는 설정 사이드바에서 활성 채널 또는 탭의 텍스트 색상.

온라인 표시기(Online Indicator)
다이렉트 메시지 목록에서 팀 멤버 이름 옆에 표시되는 온라인 표시기 색상.

자리 비움 표시기(Away Indicator)
5분 동안 브라우저 활동이 없을 때 다이렉트 메시지 목록에서 팀 멤버 이름 옆에 표시되는 자리 비움 표시기 색상.

방해 금지 표시기(Do Not Disturb Indicator)
다이렉트 메시지 목록에서 팀 멤버 이름 옆에 표시되는 방해 금지 표시기 색상.

멘션 배지 배경색(Mention Jewel BG)
채널 이름 오른쪽에 표시되는 읽지 않은 멘션 배지의 배경 색상. 이는 짧은 브라우저 창에서 채널 패널 상단이나 하단에 표시되는 “읽지 않은 게시물 아래/위” 표시기의 배경 색상이기도 합니다.

멘션 배지 텍스트(Mention Jewel Text)
읽지 않은 멘션 수를 나타내는 멘션 배지의 텍스트 색상. 이는 “읽지 않은 게시물 아래/위” 표시기의 텍스트 색상이기도 합니다.

중앙 채널 스타일#

아래에 설명된 대로 Mattermost 테마의 모든 측면을 커스터마이즈할 수 있습니다:

중앙 채널 배경색(Center Channel BG)
중앙 패널, 오른쪽 사이드바 및 모든 대화 창 배경 색상.

중앙 채널 텍스트(Center Channel Text)
중앙 패널, 오른쪽 사이드바, 대화 상자에서 멘션, 링크, 해시태그, 코드 블록을 제외한 모든 텍스트 색상.

새 메시지 구분선(New Message Separator)
읽지 않은 메시지가 있는 채널로 이동할 때 마지막으로 읽은 메시지 아래에 표시됩니다.

오류 텍스트 색상(Error Text Color)
모든 오류 텍스트의 색상.

멘션 하이라이트 배경색(Mention Highlight BG)
중앙 패널 및 오른쪽 사이드바에서 멘션을 트리거하는 단어 뒤의 하이라이트 색상.

멘션 하이라이트 링크(Mention Highlight Link)
중앙 패널 및 오른쪽 사이드바에서 멘션을 트리거하는 단어의 텍스트 색상.

코드 테마(Code Theme)
모든 코드 블록의 배경 및 구문 색상.

링크 및 버튼 스타일#

아래에 설명된 대로 Mattermost 테마의 모든 측면을 커스터마이즈할 수 있습니다:

링크 색상(Link Color)
모든 링크, 해시태그, 팀원 멘션, 낮은 우선순위 UI 버튼의 텍스트 색상.

버튼 배경색(Button BG)
모든 높은 우선순위 UI 버튼 뒤의 직사각형 배경 색상.

버튼 텍스트(Button Text)
모든 높은 우선순위 UI 버튼의 직사각형 배경에 표시되는 텍스트 색상.