Mattermost 테마 사용자 정의
모든 플랜 에서 사용 가능
Cloud 와 self-hosted 배포판
Mattermost 사용자 인터페이스의 색상을 사용자 정의할 수 있습니다. Mattermost 팀이 디자인한 다섯 가지 표준 테마 중에서 선택하거나, 표준 테마를 기반으로 자체 테마를 디자인하거나, Slack 인스턴스에서 테마 색상을 가져올 수 있습니다. 테마 변경 사항은 여러분이 속한 모든 팀에 적용되며, 모든 Mattermost 클라이언트에서 볼 수 있습니다.
Tip
Mattermost 엔터프라이즈 고객은 속한 각 팀에 대해 다른 테마를 구성할 수 있습니다.
Mattermost 테마를 사용자 정의하려면:
설정
아이콘을 선택한 후, Display > Theme 로 이동하세요. 테마 색상 을 선택하여 Mattermost 팀이 디자인한 다섯 가지 표준 테마 중에서 선택할 수 있습니다.
브라우저나 데스크톱 앱에서 Mattermost를 사용하면 표준 테마를 실제로 자신의 것으로 만들기 위해 더욱 더 사용자 정의할 수 있습니다. 표준 테마를 선택한 후, 사용자 정의 테마 를 선택하고 선호에 따라 색상 선택을 수정하세요. 사용자 정의 테마 문서에서 구성 가능한 내용을 알아보고, 영감을 얻기 위해 사용자 정의 테마 예시 문서를 확인하세요.
프로필 사진을 탭한 다음 설정 을 선택한 후, Display > Theme 로 이동하세요.
사용자 정의 테마
사용자 정의 테마 를 선택한 다음, 사이드바 스타일 , 중앙 채널 스타일 , 그리고 링크 및 버튼 스타일 옵션을 확장하여 배경, 링크, 텍스트, 그리고 테두리와 같은 인터페이스의 각각의 색상을 사용자 정의할 수 있습니다.
사용자 정의 테마 변경 사항은 작성하는 대로 Mattermost에 적용됩니다. 테마 변경을 확인하려면 저장 을 선택하세요. Display Settings 창에서 변경 사항을 지우려면 예, 취소 를 선택하세요.
사이드바 스타일
- 사이드바 배경
채널 창, 계정 및 팀 설정 탐색 사이드바의 배경 색상입니다.
- 사이드바 텍스트
채널 창의 읽은 채널과 계정 및 팀 설정 탐색 사이드바의 탭의 텍스트 색상입니다.
- 사이드바 머리글 배경
채널 창 위의 머리글과 모든 대화 상자 창 머리글의 배경 색상입니다.
- 팀 사이드바 배경
글로벌 헤더의 배경 색상입니다.
- 사이드바 머리글 텍스트
채널 창 위의 머리글과 모든 대화 상자 창 머리글의 텍스트 색상입니다.
- 사이드바 읽지 않은 텍스트
채널 창의 읽지 않은 채널의 텍스트 색상입니다.
- 사이드바 텍스트 호버 배경
채널 이름과 설정 탭 위로 마우스를 올렸을 때의 배경 색상입니다.
- 사이드바 텍스트 활성 테두리
활성 채널이나 탭을 나타내는 채널 창이나 설정 사이드바 왼쪽에 있는 직사각형 표시의 색상입니다.
- 사이드바 텍스트 활성 색상
활성 채널이나 탭의 채널 창이나 설정 사이드바의 텍스트 색상입니다.
- 온라인 지시자
직접 메시지 목록에서 팀 멤버 이름 옆에 나타나는 온라인 지시자의 색상입니다.
- 부재 중 지시자
5분 동안 브라우저 활동이 없는 경우 직접 메시지 목록에서 팀 멤버 이름 옆에 나타나는 부재 중 지시자의 색상입니다.
- 방해 금지 지시자
직접 메시지 목록에서 팀 멤버 이름 옆에 나타나는 방해 금지 지시자의 색상입니다.
- 언급 보석 배경
채널 이름 오른쪽에 나타나는 읽지 않은 언급을 나타내는 보석의 배경 색상입니다. 이것은 브라우저 창이 짧은 경우 채널 창 상단 또는 하단에 나타나는 “아랫쪽/윗쪽 읽지 않은 게시물” 표시의 배경 색상입니다.
- 언급 보석 텍스트
읽지 않은 언급의 숫자를 나타내는 보석의 텍스트 색상입니다. 이것은 “아랫쪽/윗쪽 읽지 않은 게시물” 표시의 텍스트 색상입니다.
중앙 채널 스타일
- 중앙 채널 배경
중앙 창, 오른쪽 사이드바 및 모든 대화 상자의 배경 색상입니다.
- 중앙 채널 텍스트
중앙 창, 오른쪽 사이드바 및 대화 상자에서 멘션, 링크, 해시태그 및 코드 블록을 제외한 모든 텍스트의 색상입니다.
- 새로운 메시지 구분자
읽지 않은 메시지가 있는 채널로 이동할 때 마지막으로 읽은 메시지 아래에 나타나는 새로운 메시지 구분자의 색상입니다.
- 오류 텍스트 색상
모든 오류 텍스트의 색상입니다.
- 언급 강조 배경
중앙 창과 오른쪽 사이드바에서 멘션을 트리거하는 여러분의 단어 뒤에 나타나는 강조색의 색상입니다.
- 언급 강조 링크
중앙 창과 오른쪽 사이드바에서 여러분의 단어 뒤에 나타나는 멘션을 트리거하는 단어의 텍스트 색상입니다.
- 코드 테마
모든 코드 블록의 배경 및 구문 색상입니다.
링크 및 버튼 스타일
- 링크 색상
모든 링크, 해시태그, 팀원 언급 및 낮은 우선순위 UI 버튼의 텍스트 색상입니다.
- 버튼 배경
모든 높은 우선순위 UI 버튼의 직사각형 배경 색상입니다.
- 버튼 텍스트
모든 높은 우선순위 UI 버튼의 직사각형 배경 위의 텍스트 색상입니다.
사용자 정의 테마 내보내기
사용자 정의 테마 메뉴에서 테마 값을 복사하여 Mattermost에서 테마를 내보냅니다.
사용자 정의 테마 가져오기
테마 값을 복사한 다음 사용자 정의 테마 메뉴로 테마 값을 붙여넣어 Mattermost에 가져옵니다. Slack에서 구성할 수 없는 테마 설정은 “Mattermost” 표준 테마 설정으로 기본값으로 설정됩니다. 테마 변경을 확인하려면 저장 을 선택하세요.
Slack에서 테마 가져오기
Slack에서, 설정 > 테마 로 이동한 다음 사용자 정의 테마 만들기 를 선택하고, 테마 색상 값을 복사하세요.
Mattermost에서 Slack에서 테마 색상 가져오기 를 선택한 다음 색상 값을 입력란에 붙여넣고 제출 을 선택하세요. Slack에서 구성할 수 없는 테마 설정은 “Mattermost” 표준 테마 설정으로 기본값으로 설정됩니다. 테마 변경을 확인하려면 저장 을 선택하세요.
사용자 정의 테마 예시
테마 색상을 사용자 정의하고 다른 사람과 공유하려면 테마 값을 복사하여 입력란에 붙여넣으세요. 아래는 해당하는 테마 값과 함께 몇 가지 예시 테마입니다.
Mattermost
![Mattermost 테마](../_images/Mattermost.png)
이 테마를 원하시나요? 아래 코드를 Mattermost에 복사하여 붙여넣으세요.
{"sidebarBg":"#145dbf","sidebarText":"#ffffff","sidebarUnreadText":"#ffffff","sidebarTextHoverBg":"#4578bf","sidebarTextActiveBorder":"#579eff","sidebarTextActiveColor":"#ffffff","sidebarHeaderBg":"#1153ab","sidebarTeamBarBg":"#0b428c","sidebarHeaderTextColor":"#000000","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
![조직 테마](../_images/Organization.png)
이 테마를 원하시나요? 아래 코드를 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 Dark Theme](../_images/MattermostDark.png)
이 테마가 필요하신가요? 아래 코드를 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
![Windows Dark Theme](../_images/WindowsDark.png)
이 테마가 필요하신가요? 아래 코드를 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
![GitHub Theme](../_images/GitHub.png)
이 테마가 필요하신가요? 아래 코드를 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
![Monokai Theme](../_images/Monokai.png)
이 테마가 필요하신가요? 아래 코드를 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
![Solarized Dark Theme](../_images/SolarizedDark.png)
이 테마가 필요하신가요? 아래 코드를 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
![Gruvbox Dark Theme](../_images/GruvboxDark.png)
이 테마가 필요하신가요? 아래 코드를 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
이 테마를 원하시나요? 다음 코드를 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
이 테마를 원하시나요? 다음 코드를 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
![Night Owl Dark Theme](../_images/NightOwlDark.png)
이 테마를 원하시나요? 다음 코드를 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에서 컴퓨터에서 설정한 시스템 디스플레이 환경(예: Light Mode 또는 Dark Mode)이 Mattermost 데스크톱 앱에 자동으로 적용됩니다.
![컴퓨터에서 설정한 Light Mode 또는 Dark Mode에 대한 시스템 환경설정이 자동으로 Mattermost 데스크톱 앱에 적용됩니다.](../_images/dark-theme-via-os.gif)
Linux에서는 보기(View) 메뉴를 통해 수동으로 관리할 수 있습니다.