I wrote an (un)installer script for the available themes (for MacOS)

default.js

@@ -0,0 +1,49 @@
+// CUSTOM THEMES CONFIG
+
+// First make sure the wrapper app is loaded
+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';
+ const cssPath = 'https://raw.githubusercontent.com/Nockiro/slack-black-theme/3ea2efdfb96ccc91549837ab237d57104181bbf8/custom.css';
+ let cssPromise = fetch(cssPath).then(response => response.text());
+
+ let customCustomCSS = `
+ :root {
+ /* Modify these to change your theme colors: */
+ --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);
+ })
+ });
+ });
+});

hot_dog_stand.js

@@ -0,0 +1,49 @@
+// CUSTOM THEMES CONFIG
+
+// First make sure the wrapper app is loaded
+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';
+ const cssPath = 'https://raw.githubusercontent.com/Nockiro/slack-black-theme/3ea2efdfb96ccc91549837ab237d57104181bbf8/custom.css';
+ let cssPromise = fetch(cssPath).then(response => response.text());
+
+ let customCustomCSS = `
+ :root {
+ /* Modify these to change your theme colors: */
+ --primary: #000;
+ --text: #FFF;
+ --background: #F00;
+ --background-elevated: #FF0;
+ }
+ `
+
+ // 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);
+ })
+ });
+ });
+});

install.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+#
+# Slack Custom Theme Installer
+# Harry Kantas, 2019
+# Version 1.0
+
+OS="$(uname -s)"
+case "$OS" in
+ "Darwin")
+ DEST_DIR="/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static"
+ ;;
+ *)
+ echo "Your OS is not supported by this installer yet."
+ echo "Try installing the themes manually, following the README."
+ exit 1
+esac
+
+DEST_FILE1="index.js"
+DEST_FILE2="ssb-interop.js"
+
+THEMES=("default" "one_dark" "low_contrast" "navy" "hot_dog_stand")
+
+usage() {
+cat << EOF
+Usage:
+ $0 -t <$(echo "${THEMES[@]}" | tr " " "|")>
+ $0 -u
+
+ -t: theme to install.
+ -u: revert to the default Slack theme.
+
+Note: You will have to re-run this script whenever you upgrade Slack.
+EOF
+exit 1
+}
+
+uninstall_theme() {
+ for file in $DEST_FILE1 $DEST_FILE2
+ do
+ if [[ $(grep -c "CUSTOM THEMES CONFIG" $DEST_DIR/$file) -gt 0 ]]
+ then
+ sed -i '' -e '/^\/\/ CUSTOM THEMES CONFIG$/,$d' $DEST_DIR/$file
+ fi
+ done
+}
+
+install_theme() {
+ for file in $DEST_FILE1 $DEST_FILE2
+ do
+ cat $1.js >> $DEST_DIR/$file
+ done
+}
+
+while getopts "t:u" o; do
+ case "${o}" in
+ t)
+ t="${OPTARG}"
+ if [[ $(echo "${THEMES[@]}" | grep -o "$t" | wc -w) -gt 0 ]]
+ then
+ uninstall_theme
+ install_theme "$t"
+ else
+ echo "Theme not found!"
+ echo
+ usage
+ fi
+ ;;
+ u)
+ t="original"
+ uninstall_theme
+ ;;
+ *)
+ usage
+ ;;
+ esac
+done
+if [[ "$#" -eq 0 ]]; then usage; fi
+if [[ -z "$t" ]]; then usage; fi
+
+echo "Restart Slack for changes to take effect."
+exit 0

low_contrast.js

@@ -0,0 +1,49 @@
+// CUSTOM THEMES CONFIG
+
+// First make sure the wrapper app is loaded
+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';
+ const cssPath = 'https://raw.githubusercontent.com/Nockiro/slack-black-theme/3ea2efdfb96ccc91549837ab237d57104181bbf8/custom.css';
+ let cssPromise = fetch(cssPath).then(response => response.text());
+
+ let customCustomCSS = `
+ :root {
+ /* Modify these to change your theme colors: */
+ --primary: #CCC;
+ --text: #999;
+ --background: #222;
+ --background-elevated: #444;
+ }
+ `
+
+ // 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);
+ })
+ });
+ });
+});

navy.js

@@ -0,0 +1,49 @@
+// CUSTOM THEMES CONFIG
+
+// First make sure the wrapper app is loaded
+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';
+ const cssPath = 'https://raw.githubusercontent.com/Nockiro/slack-black-theme/3ea2efdfb96ccc91549837ab237d57104181bbf8/custom.css';
+ let cssPromise = fetch(cssPath).then(response => response.text());
+
+ let customCustomCSS = `
+ :root {
+ /* Modify these to change your theme colors: */
+ --primary: #FFF;
+ --text: #CCC;
+ --background: #225;
+ --background-elevated: #114;
+ }
+ `
+
+ // 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);
+ })
+ });
+ });
+});

one_dark.js

@@ -0,0 +1,49 @@
+// CUSTOM THEMES CONFIG
+
+// First make sure the wrapper app is loaded
+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';
+ const cssPath = 'https://raw.githubusercontent.com/Nockiro/slack-black-theme/3ea2efdfb96ccc91549837ab237d57104181bbf8/custom.css';
+ let cssPromise = fetch(cssPath).then(response => response.text());
+
+ let customCustomCSS = `
+ :root {
+ /* Modify these to change your theme colors: */
+ --primary: #61AFEF;
+ --text: #ABB2BF;
+ --background: #282C34;
+ --background-elevated: #3B4048;
+ }
+ `
+
+ // 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);
+ })
+ });
+ });
+});

readme.md

@@ -8,6 +8,21 @@ A darker, more contrasty, Slack theme.
 
 # Installing into Slack
 
+## Using the install script
+
+```bash
+Usage:
+ ./install.sh -t <default|one_dark|low_contrast|navy|hot_dog_stand>
+ ./install.sh -u
+
+ -t: theme to install.
+ -u: revert to the default Slack theme.
+
+Note: You will have to re-run this script whenever you upgrade Slack.
+```
+
+## Manually
+
 Find your Slack's application directory.
 
 * Windows: `%homepath%\AppData\Local\slack\`