La tecnología a tu alcance

Muchos sistemas operativos y aplicaciones ofrecen ya la posibilidad de activar un modo oscuro, que haga que la interfaz se vea con colores oscuros. Slack todavía no ha añadido esta funcionalidad, pero aquí te enseñamos cómo añadirla por tu propia cuenta.

Para ello, vamos a editar manualmente el código de uno de los archivos del programa. Para facilitar esto es mejor usar un editor de código. Si aún no tienes uno, te recomendamos usar el editor gratuito Sublime Text.

Primer paso: elige uno de los temas oscuros

Editar directamente el código tiene una gran ventaja, y es que todo se convierte en personalizable. Puedes elegir los colores que quieras, pero en el repositorio de GitHub de este "widget", se dan algunos ejemplos:

En este tutorial usaremos el tema por defecto. Sin embargo, si cuando lo pruebas no te gusta, puedes más tarde cambiarlo de nuevo para que se adapte a tus gustos.

Importante: cierra Slack antes de empezar con el segundo paso.

Segundo paso: accede al directorio donde está el fichero a editar

  • Windows: abre el explorador de archivos e introduce en la barra superior, donde aparece el directorio actual, lo siguiente: ~\AppData\Local\slack\.
  • MacOS: accede a la carpeta "Aplicaciones", busca "Slack", haz clic derecho sobre el icono, y por último, haz clic en "Mostrar contenido del paquete".
Mostrar contenido del paquete en MacOs

Ahora deberemos ir a:

Contents > Resources > app.asar.unpacked > src
Pasos en GIF para acceder al directorio

Una vez allí, deberemos editar el archivo "sbb-interop.js". Antes de editarlo es recomendable guardar una copia por si algo sale mal, y así, poder remediarlo. Como se suele decir, es mejor prevenir que curar.

Cuando abramos el archivo con nuestro editor de código preferido, deberemos pegar el código con el tema elegido al final del archivo:

document.addEventListener("DOMContentLoaded", function() {

   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* EDITA ESTO SI HAS ELEGIDO UN TEMA DISTINTO AL QUE UTILIZAMOS EN EL TUTORIAL: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
   `

   // Insert a style tag into the wrapper view
   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      document.head.appendChild(s);
   });

   // Wait for each webview to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS into the webview
            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);
            })
      });
   });
});

Una vez hayas pegado el código al final del archivo, guardamos los cambios y... ¡Ya tenemos Slack configurado con nuestro modo oscuro!

Si te aburren estos colores, siempre puedes cambiarlos y usar los temas que se ofrecen en el repositorio de GitHub, o bien, elegir tú los colores que quieres para hacer tu propio "tema".

¿Te gusta el tema oscuro? ¿Has hecho tu propio "tema"? ¡Déjanos las respuestas en los comentarios! 😄