Jak zainstalować (nieoficjalny) tryb Dark dla Slack

Slack wciąż nie ma trybu ciemności. Mają ciemne motywy, ale pozwalają one tylko dostosować kolory paska bocznego, pozostawiając białe okno główne. Wraz z wydaniem ciemnych trybów systemowych na macOS Mojave i Windows 10, Slack czuje się bardzo nie na miejscu.

Ta metoda jest nieoficjalna i polega na kopaniu w plikach źródłowych dla Slacka. Jest to dość łatwe do zrobienia, ale ponieważ zostanie ono nadpisane przy każdej aktualizacji, będziesz musiał to zrobić wiele razy.

Pobieranie motywu

Ponieważ Slack działa na platformie Electron, która służy do tworzenia aplikacji Node.js na komputery, możesz edytować style, tak jak edytowałbyś CSS witryny. Ale pliki CSS dla Slacka są pochowane w źródle, więc będziesz musiał załadować własne motywy.

Najbardziej popularnym motywem prawdziwego trybu ciemnego jest motyw "luźno-czarny" w Widget. A ponieważ Electron udostępnia kod na różnych platformach, ten temat będzie działał również w systemach Windows i Linux. Odkryliśmy pewne problemy z motywem na macOS Mojave, więc jeśli to nie działa, możesz spróbować tego widżetu, który mówi, że działa tylko na MacOS, ale może działać również dla użytkowników Windowsa.

Patching Slack

W tej części będziesz musiał robić to za każdym razem, gdy Slack będzie aktualizowany. W systemie MacOS możesz przejść do katalogu źródłowego Slacka, klikając prawym przyciskiem myszy samą aplikację i wybierając "Pokaż zawartość pakietu". W systemie Windows znajdziesz go w ~ \ AppData \ Local \ slack \ .

Następnie przejdź do kilku folderów w dół do resources / app.asar.unpacked / src / static / . Będziesz chciał znaleźć ssb-interop.js plik, w którym będziesz edytować kod. Upewnij się, że Slack jest zamknięty, otwórz ten plik w ulubionym edytorze tekstu i przewiń do dołu:

Skopiuj i wklej następujący kod na samym końcu ssb-interop.js plik:

// Najpierw upewnij się, że aplikacja do pakowania jest załadowana document.addEventListener ("DOMContentLoaded", function () // Następnie uzyskaj jej odsłon witryny webviews = document.querySelectorAll ("Webview TeamView") / // Pobierz nasz CSS równolegle do przodu czasu cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; let cssPromise = fetch (cssPath) .then (response => response.text () ); let customCustomCSS = ': root / * Zmodyfikuj te, aby zmienić kolory kompozycji: * / --primary: # 09F; --text: #CCC; --background: # 080808; --background-elevated: # 222 ; '// Wstaw znacznik stylu do widoku opakowania cssPromise.then (css => let s = document.createElement (' style '); s.type =' text / css '; s.innerHTML = css + customCustomCSS ; document.head.appendChild (s);); // Poczekaj, aż każda przeglądarka internetowa załaduje webviews.forEach (webview => webview.addEventListener ('ipc-message', message => if (message.channel == 'didFinishLoading') // Wreszcie dodaj CSS do widoku webowego 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 (skrypt); )); ); ); 

Prawdopodobnie będziesz chciał zduplikować ten plik i zapisać go w innym miejscu, aby nie trzeba było edytować kodu za każdym razem. W ten sposób możesz po prostu przeciągnąć go do katalogu, aby zastąpić najnowszą wersję:

Po zakończeniu ponownie otwórz Slack, a po kilku sekundach powinien się włączyć tryb ciemny. Ekran ładowania będzie nadal biały, ale główne okno aplikacji będzie mieszać się znacznie lepiej z resztą systemu:

Dodawanie własnych motywów

Jeśli nie podoba ci się jego wygląd, możesz edytować CSS dowolnymi stylami. Cały ten kod nie zawiera niestandardowych stylów z https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; możesz pobrać ten plik, edytować go ze zmianami i zastąpić URL własnym kodem. Zapisz, uruchom ponownie Slack, a twoje zmiany będą widoczne. Jeśli nie znasz CSS lub po prostu chcesz wprowadzić drobną zmianę, przed załadowaniem CSS zdefiniowane są cztery zmienne kolorów, więc możesz je edytować za pomocą własnych kolorów.