A Modified Mac OS Slack Client Dark Theme with Support for Syntax Highlighting

README.md

A Modified Mac OS Slack Client Dark Theme with Support for Syntax Highlighting

This must be installed in /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js use the editor of your choice to replace the contents of ssb-interop.js with the code below.

I use Sublime Text, and called it from CLI via;

sudo subl /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

Note: it's a very good idea to make a back up copy of ssb-interop.js before making these modifications.

Thanks to Konsumer for refined syntax version: https://gist.github.com/konsumer/e8942dde9e65f08edd70edd6014f7cea

ssb-interop.js

// do not migrate preload script into TypeScript
require('../stat-cache')

const profiler = require('../utils/profiler.js')
if (profiler.shouldProfile()) profiler.startProfiling()

let assignIn = require('lodash').assignIn
let path = require('path')
let isPrebuilt = require('../utils/process-helpers').isPrebuilt

// tslint:disable-next-line
process.on('uncaughtException', (e) => console.error(e))

// Warning: You almost certainly do *not* want to edit this code - instead, you
// want to edit src/ssb/main.js instead
let start = function (loadSettings) {
  window.loadSettings = loadSettings

  const mainModule = path.join(loadSettings.resourcePath, 'src', 'ssb', 'main.ts')
  const isDevMode = loadSettings.devMode && isPrebuilt()
  require('electron-compile').init(loadSettings.resourcePath, mainModule, !isDevMode)
}

const processRef = window.process
process.nextTick(function() { // eslint-disable-line
  // Patch global back in
  window.process = processRef
})

// NB: For whatever reason, we have to wait longer to restore 'global'
// Update (2017.Jan.18): This context 'restoration' causes unexpected state mutation in post,
// especially related to check selection state via $("selection.user") when compositionupdate event fired.
// As it does not have clear usecases at the moment, blocking it to prevent webapp abnormality
// setTimeout(function() { window.global = window; }, 10);

start(assignIn({}, require('electron').remote.getGlobal('loadSettings'), { windowType: 'WEBAPP' }))

/// ///////////////////////////////////////////////////////////////////////////////////
// Start modifications
/// ///////////////////////////////////////////////////////////////////////////////////

document.addEventListener('DOMContentLoaded', function () {
 // Add dark theme
 // From: https://github.com/albinekb/enhanced-slack

  $.ajax({
    url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
    success: function (css) {
      $('<style></style>').appendTo('head').html(css)
    }
  })

  // Syntax Highlighting
  // set this to the theme you prefer
  // List available: https://highlightjs.org/static/demo/
  const theme = 'atom-one-dark'

  let script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js',
  $('head').append(script)

  $.ajax({
    url: `https://cdn.jsdelivr.net/highlight.js/9.9.0/styles/${theme}.min.css`,
    success: function (css) {
      $('<style></style>').appendTo('head').html(css)
    }
  })

  function render () {
    $('pre:not(.hljs)').each(function () {
      hljs.highlightBlock(this)
    })
  }

  render()
  setInterval(() => {
    render()
  }, 1000)
})
/// ///////////////////////////////////////////////////////////////////////////////////
// End modifications
/// ///////////////////////////////////////////////////////////////////////////////////