Het Installeren van de (Onofficiële) Donker Modus voor Speling

0
295

Slack heeft nog steeds niet een donkere modus. Ze hebben een donkere thema ‘ s, maar die alleen kunt u de zijbalk kleuren, waardoor het hoofdvenster wit. Met de release van systeem-brede donkere modi op macOS Mojave-en Windows-10, Slap voelt zich zeer op zijn plaats is.

Deze methode is onofficieel en gaat graven rond in de bronbestanden voor de Verslapte. Het is vrij eenvoudig om te doen, maar omdat het telkens overschreven wanneer u de update, u zal hebben doen dit meerdere keren.

Een Thema downloaden

Sinds Slack draait op Elektron, een kader voor het ontwikkelen van desktop Node.js apps, kunt u de stijlen, zoals u wilt bewerken in de CSS van een website. Maar de CSS-bestanden voor de Verslapte zijn begraven in de bron, dus je zult moeten om te laden uw eigen thema ‘ s.

De meest populaire ware donker modus thema is slack-zwart-theme Widget. En sinds Elektron aandelen code over platforms, dit thema zal werken op Windows en Linux. We vonden er waren wat problemen met het thema op macOS Mojave al, dus als het niet werkt, dan kunt u proberen deze vork, die zegt dat het werkt op macOS alleen maar kan werken voor Windows-gebruikers.

Het Patchen Van Slack

Dit deel, je moet elke keer de Slappe updates. Op macOS, kun je aan de Speling van de bron map door met de rechtermuisknop te klikken op de app zelf en het selecteren van “Show Package Contents”. Op Windows, u vindt het bij ~AppDataLocalslack .

Navigeer dan een paar mappen naar beneden tot bronnen/app.asar.uitgepakt/src/static/ . Bent u gaat te willen om de ssb-interop.js bestand, waar je de code bewerken. Zorg ervoor dat Slap is gesloten, opent u het bestand in je favoriete tekst-editor en ga naar de onderkant:

Kopieer en plak de volgende code aan het einde van de ssb-interop.js bestand:

// Controleer dan eerst of de wrapper app is geladen
document.addEventListener(“DOMContentLoaded”, function() {

// En dan krijgen de webviews
laat webviews = document.querySelectorAll(“.TeamView webview”);

// Fetch onze CSS parallel van tevoren
const cssPath = ‘https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css’;
laat cssPromise = fetch(cssPath).vervolgens(respons => reactie.tekst());

laat customCustomCSS = `
:root {
/* Verander deze naar uw thema wijzigen kleuren: */
–primair: #09F;
–tekst: #CCC;
–achtergrond: #080808;
–achtergrond-verhoogde: #222;
}
`

// Voer een tag style in de wrapper bekijken
cssPromise.vervolgens(css => {
laat s = document.createElement(‘stijl’);
s.type = ‘text/css’;
s.innerHTML = css + customCustomCSS;
document.hoofd.appendChild(s);
});

// Wacht voor elke webview te laden
webviews.forEach(webview => {
webview.addEventListener(‘ipc-bericht’, bericht => {
als (bericht.channel == ‘didFinishLoading’)
// Voeg tenslotte de CSS in de webview
cssPromise.vervolgens(css => {
laat script = `
laat s = document.createElement(‘stijl’);
s.type = ‘text/css’;
s.id = ‘slack-custom-css’;
s.innerHTML = `${css + customCustomCSS}`;
document.hoofd.appendChild(s);
`
webview.executeJavaScript(script);
})
});
});
});

U zult waarschijnlijk willen kopieer dit bestand en sla het op in een andere locatie, dus u hoeft niet te wijzigen van de code elke keer. Deze manier, u kunt gewoon slepen naar de map te overschrijven met de nieuwste versie:

Nadat u klaar bent, opent u de Verslapte, en na een paar seconden de donkere modus moet schoppen. Het laden scherm nog steeds wit, maar de belangrijkste app venster zal opgaan in een veel beter met de rest van uw systeem:

Het Toevoegen Van Uw Eigen Thema ‘ S

Als je niet van de kijken, u kunt de CSS bewerken met om het even welke stijlen die u wilt. Alle deze code doet is belasting aangepaste stijlen van https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; u kunt downloaden dat bestand, bewerken met uw wijzigingen, en vervang de URL door uw eigen code. Opslaan, herstart Slap, en uw wijzigingen worden zichtbaar. Als je niet weet CSS, of wil gewoon een kleine aanpassing, er zijn vier kleuren variabelen die zijn gedefinieerd voor het laden van de CSS, zodat u gewoon kunt bewerken met uw eigen kleuren.