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

Slack todavía no tiene un modo oscuro. Tienen temas oscuros, pero esos solo te permiten personalizar los colores de la barra lateral, dejando la ventana principal en blanco.

Slack todavía no tiene un modo oscuro. Tienen temas oscuros, pero esos solo te permiten personalizar los colores de la barra lateral, dejando la ventana principal en blanco. Con el lanzamiento de modos oscuros en 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, tendrá que hacerlo varias veces.

Descargar un tema

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

El tema de modo oscuro verdadero más popular es el tema slack-black-theme de Widget. Y dado que Electron comparte código entre plataformas, este tema también funcionará en Windows y Linux. Sin embargo, descubrimos que había algunos problemas con el tema en macOS Mojave, por lo que si no funciona, puede probar esta bifurcación, que dice que funciona solo en macOS, pero también puede funcionar para usuarios de Windows.

Parche flojo

Esta parte, tendrá que volver a hacerlo 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á en ~ \ AppData \ Local \ slack \ .

Luego, navegue por algunas carpetas hasta resources/app.asar.unpacked/src/static/. Querrá encontrar el archivo ssb-interop.js , donde editará el código. Asegúrese de que Slack esté cerrado, abra ese archivo en su editor de texto favorito y desplácese hasta la parte inferior:

Copie y pegue el siguiente código al final del archivo ssb-interop.js :

 // Primero asegúrese de que la aplicación de envoltura esté cargada
document.addEventListener ("DOMContentLoaded", function () {
// Luego obtenga sus webviews
let webviews = document.querySelectorAll (". TeamView webview");
// Obtenga nuestro CSS en paralelo antes de tiempo
const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
let cssPromise = fetch (cssPath) .then (response => response.text ());
dejar que customCustomCSS = `
: root {/* Modifíquelos para cambiar los colores de su tema: */--primaria: # 09F;
--texto: #CCC;
- fondo: # 080808;
- elevado en el fondo: # 222;
}
``
// Inserta una etiqueta de estilo en la vista del contenedor
cssPromise.then (css => {
let s = document.createElement ('estilo');
s.type = 'texto/css';
s.innerHTML = css + customCustomCSS;
document.head.appendChild (s);
});
// Espera a que se cargue cada vista web
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 ('estilo');
s.type = 'texto/css';
s.id = 'slack-custom-css';
s.innerHTML = \ `$ {css + customCustomCSS} \`;
document.head.appendChild (s);
``
webview.executeJavaScript (script);
})
});
});
});

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

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

Agregar tus propios temas

Si no le gusta su aspecto, puede editar el CSS con los estilos que desee. 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 conoce 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.

Rate article
labsfabs.com
Add a comment