Cómo instalar el modo oscuro (no oficial) para Slack

Slack todavía no tiene un modo oscuro. Tienen temas oscuros, pero solo te permiten personalizar los colores de la barra lateral, dejando la ventana principal en blanco. Con el lanzamiento de los modos oscuros de todo el sistema en macOS Mojave y Windows 10, Slack se siente muy fuera de lugar.

Este método no es oficial e implica buscar en los archivos de origen de Slack. Es bastante fácil de hacer, pero como se sobrescribirá cada vez que actualice, deberá hacerlo varias veces..

Descargando un tema

Dado que Slack se ejecuta en Electron, un marco para desarrollar aplicaciones de escritorio Node.js, puede editar los estilos como si fuera a editar el CSS de un sitio web. Pero los archivos CSS de Slack están ocultos en la fuente, por lo que tendrás que cargar tus propios temas..

El tema del modo oscuro más popular es el tema slack-black-by Widget. Y dado que Electron comparte el código entre plataformas, este tema también funcionará en Windows y Linux. Encontramos que hubo algunos problemas con el tema en macOS Mojave, así que si no funciona, puedes probar este fork, que dice que funciona solo en macOS pero que también puede funcionar para usuarios de Windows.

Parche Slack

Esta parte, tendrás que hacerla cada vez que Slack se actualice. En macOS, puede acceder al directorio de origen de Slack haciendo clic derecho en la aplicación y seleccionando "Mostrar contenido del paquete". En Windows, lo encontrarás en ~ \ AppData \ Local \ slack \ .

Luego, navegue unas cuantas carpetas hasta recursos / app.asar.unpacked / src / static / . Vas a querer encontrar el ssb-interop.js Archivo, donde editarás el código. Asegúrese de que Slack esté cerrado, abra ese archivo en su editor de texto favorito y desplácese hasta el final:

Copie y pegue el siguiente código al final de la ssb-interop.js expediente:

// Primero asegúrese de que la aplicación del wrapper esté cargada document.addEventListener ("DOMContentLoaded", function () // Luego obtenga sus webviews permita que webviews = document.querySelectorAll (". TeamView webview"); // Busque nuestro CSS en paralelo of time const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; let cssPromise = fetch (cssPath) .then (response => response.text () ); permita que customCustomCSS = ': root / * Modifique estos para cambiar los colores de su tema: * / --primary: # 09F; --text: #CCC; --background: # 080808; --background-elevated: # 222 ; '// Inserte una etiqueta de estilo en la vista del contenedor cssPromise.then (css => let s = document.createElement (' style '); s.type =' text / css '; s.innerHTML = css + customCustomCustomCSS ; document.head.appendChild (s);); // Espere a que cada vista web cargue webviews.forEach (webview => webview.addEventListener ('ipc-message', message => if (message.channel == 'didFinishLoading') // Finalmente, agregue el CSS en la vista web 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); )); ); ); 

Probablemente querrá duplicar este archivo y guardarlo en una ubicación diferente, para que no tenga que editar el código cada vez. De esta manera, simplemente puede arrastrarlo al directorio para sobrescribir la versión más reciente:

Una vez que hayas terminado, vuelve a abrir Slack y, luego de unos segundos, el modo oscuro debería activarse. La pantalla de carga seguirá siendo blanca, pero la ventana principal de la aplicación se integrará mucho mejor con el resto de tu sistema:

Agregar tus propios temas

Si no te gusta su aspecto, puedes editar el CSS con cualquier estilo que desees. Todo lo que hace este código es cargar estilos personalizados desde https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; puede descargar ese archivo, editarlo con sus cambios y reemplazar la URL con su propio código. Guarde, reinicie Slack y sus cambios serán visibles. Si no sabe CSS, o simplemente quiere hacer un cambio menor, hay cuatro variables de color definidas antes de cargar el CSS, por lo que puede editarlas con sus propios colores..