슬랙을 위해 (비공식) 다크 모드를 설치하는 방법

슬랙에는 여전히 어두운 모드가 없습니다. 어두운 테마가 있지만 사이드 바 색상 만 사용자 정의 할 수 있으며 기본 창은 흰색으로 남겨 둡니다. macOS Mojave 및 Windows 10에서 시스템 전체의 어두운 모드가 출시됨에 따라 Slack은 제자리를 벗어났습니다.

이 방법은 비공식적이며 Slack의 소스 파일을 파헤칩니다. 수행하기는 쉽지만 업데이트 할 때마다 덮어 쓰기 때문에 여러 번 수행해야합니다.

테마 다운로드

Slack은 데스크톱 Node.js 앱 개발을위한 프레임 워크 인 Electron에서 실행되므로 웹 사이트의 CSS를 편집하는 것처럼 스타일을 편집 할 수 있습니다. 그러나 Slack의 CSS 파일은 소스에 묻혀 있으므로 자신 만의 테마를로드해야합니다.

가장 인기있는 진정한 다크 모드 테마는 위젯의 슬랙 블랙 테마입니다. Electron은 여러 플랫폼에서 코드를 공유하므로이 테마는 Windows 및 Linux에서도 작동합니다. 우리는 macOS Mojave의 테마에 문제가 있음을 발견했지만 작동하지 않으면이 포크를 사용해 볼 수 있습니다.이 포크는 macOS에서만 작동하지만 Windows 사용자에게도 작동 할 수 있습니다.

패치 슬랙

이 부분에서는 Slack이 업데이트 될 때마다 다시 수행해야합니다. macOS에서는 앱 자체를 마우스 오른쪽 버튼으로 클릭하고 “패키지 내용 표시”를 선택하여 Slack의 소스 디렉토리로 이동할 수 있습니다. Windows에서는 다음에서 찾을 수 있습니다. ~AppDataLocalslack .

그런 다음 몇 개의 폴더를 아래로 탐색하십시오. resources/app.asar.unpacked/src/static/ . 당신은 찾을 것입니다 ssb-interop.js 코드를 수정합니다. 슬랙이 닫혀 있는지 확인하고 원하는 텍스트 편집기에서 해당 파일을 연 다음 맨 아래로 스크롤하십시오.

다음 코드를 맨 끝에 복사하여 붙여 넣습니다. ssb-interop.js 파일:

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() {

   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
   `

   // Insert a style tag into the wrapper view
   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      document.head.appendChild(s);
   });

   // Wait for each webview to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS into the webview
            cssPromise.then(css => {
               let script = `
                     let s = document.createElement('style');
                     s.type = 'text/css';
                     s.id = 'slack-custom-css';
                     s.innerHTML = `${css + customCustomCSS}`;
                     document.head.appendChild(s);
                     `
               webview.executeJavaScript(script);
            })
      });
   });
});

이 파일을 복제하여 다른 위치에 저장하고 싶을 때마다 코드를 편집 할 필요가 없습니다. 이 방법으로 디렉토리로 끌어서 최신 버전을 덮어 쓸 수 있습니다.

완료 후 Slack을 다시 열고 몇 초 후에 어두운 모드가 시작됩니다. 로딩 화면이 여전히 흰색이지만 기본 앱 창이 나머지 시스템과 훨씬 잘 혼합됩니다.

자신 만의 테마 추가

모양이 마음에 들지 않으면 원하는 스타일로 CSS를 편집 할 수 있습니다. 이 코드는 customhttps : //cdn.rawgit.com/widget-/slack-black-theme/master/custom.css에서 사용자 정의 스타일을로드합니다. 해당 파일을 다운로드하고 변경 내용으로 편집 한 다음 URL을 고유 코드로 바꿀 수 있습니다. Slack을 저장하고 다시 시작하면 변경 사항이 표시됩니다. CSS를 모르거나 약간만 변경하려는 경우 CSS를로드하기 전에 4 가지 색상 변수가 정의되어 있으므로 원하는 색상으로 편집 할 수 있습니다.