슬랙을 위해 (비공식적 인) 다크 모드를 설치하는 방법
슬랙에는 여전히 어두운 모드가 없습니다. 그들은 어두운 테마를 가지고 있지만 사이드 바 색상 만 사용자 정의 할 수 있도록하여 기본 창을 흰색으로 유지합니다. MacOS Mojave 및 Windows 10에서 시스템 전체의 어두운 모드가 릴리스되면서 Slack은 매우 어둡습니다..
이 방법은 비공식적이며 슬랙 (Slack)을위한 소스 파일을 파고 들기도합니다. 상당히 쉽게 할 수 있지만 업데이트 할 때마다 덮어 쓰기되므로 여러 번해야합니다..
테마 다운로드
Slack은 데스크톱 Node.js 앱을 개발하기위한 프레임 워크 인 Electron에서 실행되기 때문에 웹 사이트의 CSS를 편집하는 것처럼 스타일을 편집 할 수 있습니다. 그러나 Slack을위한 CSS 파일은 소스에 묻혀 있으므로 자신 만의 테마를로드해야합니다..
가장 인기있는 진정한 어두운 모드 테마는 위젯의 여유로운 블랙 테마입니다. 그리고 Electron는 플랫폼 전반에서 코드를 공유하므로이 테마는 Windows와 Linux에서도 작동합니다. 우리는 macOS Mojave에 대한 주제와 관련된 몇 가지 문제가 있음을 발견했습니다. 작동하지 않으면이 포크를 시도 할 수 있습니다.이 포크는 macOS에서만 작동하지만 Windows 사용자들에게도 도움이 될 수 있습니다..
슬랙 패치
이 부분은 슬랙 업데이트가있을 때마다 다시해야합니다. macOS에서 Slack의 소스 디렉토리로 가려면 응용 프로그램을 마우스 오른쪽 버튼으로 클릭하고 "패키지 내용보기"를 선택하십시오. Windows에서는 다음 위치에서 찾을 수 있습니다. ~ \ AppData \ Local \ slack \ .
그런 다음 몇 개의 폴더를 탐색하여 resources / app.asar.unpacked / src / static / . 너는 네가 찾는 것을 원할거야. ssb-interop.js 파일에서 코드를 편집합니다. 슬랙 (Slack)이 닫혀 있는지 확인하고, 좋아하는 텍스트 편집기에서 해당 파일을 열고 아래로 스크롤하십시오.
맨 아래에 다음 코드를 복사하여 붙여 넣으십시오. ssb-interop.js 파일:
// 먼저 래퍼 앱이로드되었는지 확인합니다. document.addEventListener ( "DOMContentLoaded", function () // 그런 다음 웹 뷰를 가져옵니다. webviews = document.querySelectorAll ( ". TeamView webview"); // CSS를 미리 병렬로 가져옵니다. time const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; cssPromise = fetch (cssPath) .then (response => response.text () ); let customCustomCSS = ': root / * 테마 색상을 변경하려면 다음을 수정하십시오. * / --primary : # 09F --text : #CCC; --background : # 080808 --background-elevated : # 222 ; '// 래퍼 뷰에 스타일 태그 삽입 cssPromise.then (css => let s = document.createElement ('style '); s.type ='text / css '; s.innerHTML = css + customCustomCSS // 각 webview에 대한 webviews.forEach (webview => webview.addEventListener ( 'ipc-message', message => if (message.channel ==) 'didFinishLoading') // 마지막으로 CSS를 webview cssPromise.then에 추가합니다 (css => let 스크립트 = 'let s = document.createElement ('style '); s.type = 'text / css'; s.id = '슬랙 - 커스텀 - CSS'; s.innerHTML = \ '$ css + customCustomCSS \'; document.head.appendChild (s); 'webview.executeJavaScript (script); ))); ); ); 이 파일을 복제하여 다른 위치에 저장하려고 할 때마다 코드를 매번 편집 할 필요가 없습니다. 이렇게하면 최신 버전을 덮어 쓸 디렉토리로 드래그 할 수 있습니다.
작업이 끝나면 여유 시간을 다시 열고 몇 초 후에 어둡게 모드가 시작됩니다. 로딩 화면은 여전히 흰색이지만 기본 앱 창이 다른 시스템과 훨씬 잘 어울립니다.
나만의 테마 추가하기
모양이 마음에 들지 않으면 원하는 스타일로 CSS를 편집 할 수 있습니다. 이 모든 코드는 https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css에서 사용자 정의 스타일을로드합니다. 해당 파일을 다운로드하여 변경 사항을 편집하고 URL을 사용자 자신의 코드로 바꿀 수 있습니다. 슬랙을 저장하고 다시 시작하면 변경 사항이 표시됩니다. CSS를 모르거나 사소한 변경 만하려는 경우 CSS를로드하기 전에 정의 된 네 가지 색상 변수가 있으므로 자신의 색상으로 편집 할 수 있습니다.
