Rebase from Nockiro

Implemented improved instructions from Nockiro/slack-black-theme. Copied black.css as custom.css for further development. Added simple Python server app with CORS enabled for local dev.
mmiraldi · Mar 29, 2019 · 0bf9ec0 · 0bf9ec0
1 parent f6f86ec
commit 0bf9ec0
Show file tree

Hide file tree

Showing 4 changed files with 1,822 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,236 @@
-# slack-themes
-Custom CSS for Slack desktop app
+# Slack Black Theme
 
-Most themes are merely tweaks of original CSS by Bryan Keller (https://github.com/widget-).
-See https://github.com/widget-/slack-black-theme for instructions on applying custom CSS to Slack.
+A darker, more contrasty, Slack theme.
+
+# Preview
+
+![Screenshot](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)
+
+# Installing into Slack
+
+Find your Slack's application directory.
+
+* Windows: `%homepath%\AppData\Local\slack\`
+* Mac: `/Applications/Slack.app/Contents/`
+* Linux: `/usr/lib/slack/` (Debian-based)
+
+
+Open up the most recent version (e.g. `app-2.5.1`) then open
+`resources\app.asar.unpacked\src\static\index.js`
+
+For versions after and including `3.0.0` the same code must be added to the following file
+`resources\app.asar.unpacked\src\static\ssb-interop.js`
+
+At the very bottom, add
+
+```js
+// 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://raw.githubusercontent.com/Nockiro/slack-black-theme/master/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;
+   } 
+
+   a[aria-label^="NAME_OF_CHANNEL_OR_DIRECT_CONVO_TO_STYLE"]
+   {
+        --background: #4d0000  !important;
+        --text-transform: uppercase  !important;
+        --letter-spacing: 2px !important;
+        --text-shadow: 1px 1px white;
+
+    }   `
+
+   // 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);
+            })
+      });
+   });
+});
+```
+
+Notice that you can edit any of the theme colors using the custom CSS (for
+the already-custom theme.) Also, you can put any CSS URL you want here,
+so you don't necessarily need to create an entire fork to change some small styles.
+
+That's it! Restart Slack and see how well it works.
+
+NB: You'll have to do this every time Slack updates.
+
+# Color Schemes
+
+Here's some example color variations you might like.
+
+## Default
+![Default](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)
+```
+--primary: #09F;
+--text: #CCC;
+--background: #080808;
+--background-elevated: #222;
+```
+
+## One Dark
+![One Dark](https://user-images.githubusercontent.com/806101/27455546-826b3d88-5752-11e7-8a6b-87285b90eb3e.png)
+```
+--primary: #61AFEF;
+--text: #ABB2BF;
+--background: #282C34;
+--background-elevated: #3B4048;
+```
+
+## Low Contrast
+![Low Contrast](https://cloud.githubusercontent.com/assets/7691630/24120352/4ccdedf2-0d82-11e7-8ff7-c88e48b8e917.png)
+```
+--primary: #CCC;
+--text: #999;
+--background: #222;
+--background-elevated: #444;
+```
+
+## Navy
+![Navy](https://cloud.githubusercontent.com/assets/7691630/24120353/4cd08c4c-0d82-11e7-851a-4c62340456ad.png)
+```
+--primary: #FFF;
+--text: #CCC;
+--background: #225;
+--background-elevated: #114;
+```
+
+## Hot Dog Stand
+![Hot Dog Stand](https://cloud.githubusercontent.com/assets/7691630/24120351/4cca6182-0d82-11e7-8de8-7ab99dcde042.png)
+```
+--primary: #000;
+--text: #FFF;
+--background: #F00;
+--background-elevated: #FF0;
+```
+
+## Coloring people/channel/conversations
+
+One of the most frustrating things about Slack is the lack of visual emphasis on key conversations beyond a long list of alphabetically ordered favorites. If you want to color a conversation that is easy to do. Using the browser developer tools accessible inside Slack (see section right below) you can find out what CSS to target, but the result is that you basically target the "aria-label" attributes which happen to contain your people and channel conversation names. 
+
+So if you have a channel called "*apj*-sa" then you target and style it like this with additional CSS:
+
+```
+   a[aria-label^="apj-sa"]
+   {
+        background: #4d0000  !important;
+        text-transform: uppercase  !important;
+        letter-spacing: 2px !important;
+        text-shadow: 1px 1px white;
+    }
+
+```
+
+You can also target multiple people or conversations at once, i.e. to target conversations with takuya, Rubs and Yuan Li use this css:
+
+```
+   a[aria-label^="takuya"],
+   a[aria-label^="Yuan Li"],
+   a[aria-label^="Rubs"]
+   {
+        background: #4d0000  !important;
+        text-transform: uppercase  !important;
+        letter-spacing: 2px !important;
+        text-shadow: 1px 1px white;
+
+    }
+
+```
+
+![Screenshot of people/channels/conversations colored](https://user-images.githubusercontent.com/1035157/45020404-39f64000-b072-11e8-981b-e02b5a582faa.png)
+
+
+
+# Development
+
+`git clone` the project and `cd` into it.
+
+Change the CSS URL to `const cssPath = 'http://localhost:8080/custom.css';`
+
+Run a static webserver of some sort on port 8080:
+
+```bash
+npm install -g static
+static .
+```
+
+In addition to running the required modifications, you will likely want to add auto-reloading:
+
+```js
+const cssPath = 'http://localhost:8080/custom.css';
+const localCssPath = '/Users/bryankeller/Code/slack-black-theme/custom.css';
+
+window.reloadCss = function() {
+   const webviews = document.querySelectorAll(".TeamView webview");
+   fetch(cssPath + '?zz=' + Date.now(), {cache: "no-store"}) // qs hack to prevent cache
+      .then(response => response.text())
+      .then(css => {
+         console.log(css.slice(0,50));
+         webviews.forEach(webview =>
+            webview.executeJavaScript(`
+               (function() {
+                  let styleElement = document.querySelector('style#slack-custom-css');
+                  styleElement.innerHTML = \`${css}\`;
+               })();
+            `)
+         )
+      });
+};
+
+fs.watchFile(localCssPath, reloadCss);
+```
+
+Instead of launching Slack normally, you'll need to enable developer mode to be able to inspect things.
+
+* Mac: `export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app`
+
+* Linux: `export SLACK_DEVELOPER_MENU=true && /usr/bin/slack`
+
+* Windows (PowerShell):
+
+```powershell
+# Set environment variable
+[System.Environment]::SetEnvironmentVariable('SLACK_DEVELOPER_MENU', 'true', 'Process')
+
+# Launch Slack (replace x.y.z with the latest version)
+& $env:LOCALAPPDATA\slack\app-x.y.z\slack.exe
+
+# Open developer console by pressing: Ctrl + Alt + I
+```
+
+# License
+
+Apache 2.0
diff --git a/black.css b/black.css
@@ -874,10 +874,12 @@ ts-thread .thread_messages,
    margin: 0 !important;
    border-radius: 10px;
 }
+
 .p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before, .p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list:not(.c-virtual_list--scrollbar):before
 {
 	box-shadow: 0 32px var(--background);
 }
+
 ts-thread .collapse_inline_thread_container:hover,
 ts-thread .view_all_replies_container:hover {
    background-color: var(--background-elevated);
@@ -1414,9 +1416,18 @@ nav {
 }
 
 /* message editor */
-.c-message__editor__input {
+.c-message__editor__input,
+.c-message__editor__input--legacy {
     background: var(--background-elevated);
 }
+.c-message__editor__emoji_circle_icon,
+.c-message__editor__emoji_happy_icon,
+.c-message__editor__emoji_smile_icon {
+	color: var(--border-dim);
+}
+.c-message_kit__background--editing {
+	background: var(--background-hover);
+}
 .c-message--highlight, .c-message--highlight_yellow_bg {
     background: var(--background);
 }

diff --git a/cors.py b/cors.py
@@ -0,0 +1,17 @@
+#!/usr/bin/env python3
+# encoding: utf-8
+"""Use instead of `python3 -m http.server` when you need CORS"""
+
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+
+
+class CORSRequestHandler(SimpleHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET')
+        self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
+        return super(CORSRequestHandler, self).end_headers()
+
+
+httpd = HTTPServer(('localhost', 8888), CORSRequestHandler)
+httpd.serve_forever()