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, puedes editar los estilos como si fueras a editar el CSS de un sitio web. Pero los archivos CSS de Slack están ocultos en la fuente, por lo que tendrá que cargar sus propios temas.

El tema de modo oscuro más popular es slack-black-theme por 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 tenedor, que dice que funciona solo en macOS pero que también puede funcionar para usuarios de Windows.

Parche Slack

En esta parte, tendrás que repetir 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 contenedor está cargada
documento.addEventListener("DOMContentLoaded", función() {

   // Entonces consigue sus webviews
   dejar webviews = documento.querySelectorAll(".TeamView webview");

   / / Obtener nuestro CSS en paralelo antes de tiempo
   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   dejar css prometer = ha podido recuperar(cssPath).entonces(respuesta => respuesta.texto());

   dejar customCustomCSS = `
      : root {
            / * Modifica estos para cambiar los colores de tu tema: * /
            --primaria: # 09F;
            --text: #CCC;
            --fondo: # 080808;
            --nivel de fondo elevado: # 222;
      }
   `

   // Insertar una etiqueta de estilo en la vista de contenedor
   css prometer.entonces(css => {
      dejar s = documento.crearElement('estilo');
      s.tipo = 'texto / css';
      s.internalHTML = css + customCustomCSS;
      documento.cabeza.añadir Niño(s);
   });

   // Espera a que cada vista web se cargue
   webviews.para cada(webview => {
      webview.addEventListener('mensaje de ipc', mensaje => {
         Si (mensaje.canal == 'didFinishLoading')
            // Finalmente agregar el CSS en la webview
            css prometer.entonces(css => {
               dejar guión = `
                                          sea ​​s = document.createElement ('estilo');
                                          s.type = 'text / css';
                                          s.id = 'slack-custom-css';
                                          s.innerHTML = PScss + customCustomCSS};
                                          document.head.appendChild (s);
                     `
               webview.ejecutarJavaScript(guión);
            })
      });
   });
});

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 comenzar. 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, así que puede editarlas con sus propios colores.

Deja un comentario

Menú de cierre