If-Koubou

Jak zainstalować (nieoficjalny) tryb ciemny dla luzu

Jak zainstalować (nieoficjalny) tryb ciemny dla luzu (Jak)

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 systemowych ciemnych trybów 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 "luźno-czarny" temat widżetu. A ponieważ Electron udostępnia kod na różnych platformach, ten motyw 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 wypróbować ten fork, który mówi, że działa tylko na MacOS, ale może również działać dla użytkowników Windows.

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 tag 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 na każdą przeglądarkę internetową, aby załadować 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, więc nie musisz 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 za pomocą dowolnych stylów. 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.