From 8a85d6158763e91438eb256e93835ceda3269a75 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 08:15:04 -0600 Subject: [PATCH 01/10] easy access to js this will allow automation. --- addEventListener.js | 46 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 addEventListener.js diff --git a/addEventListener.js b/addEventListener.js new file mode 100644 index 0000000..3b22f3e --- /dev/null +++ b/addEventListener.js @@ -0,0 +1,46 @@ +// 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'; + 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); + }) + }); + }); +}); From 6e90fbaf6bf5be0c4f5d9b54cb84642f6f3718e1 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 09:34:44 -0600 Subject: [PATCH 02/10] Mac OSX Automation Automator --- automate-mac.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 automate-mac.md diff --git a/automate-mac.md b/automate-mac.md new file mode 100644 index 0000000..86b03a3 --- /dev/null +++ b/automate-mac.md @@ -0,0 +1,40 @@ +# Mac OSX Automation + +## Create a new "App" +This will launch Slack and automate the script install. +(See the picture below.) + +Open Automator, and choose 'Application' from the pane that appears. + +## Utilities +In the sidebar, there should be an item called 'Utilities'. Click this, and drag a `Run Shell Script` action into the main workflow. + +## Script +Add this to the script. + +```sh +# open and let it init (upgrade ... maybe) +open /Applications/Slack.app +# now check to see if it is up to date with our theme! +cd /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static +$(grep -q slack-black-theme index.js) +if [[ $? == 1 ]]; then + echo "\n\n$(curl https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js)" >> index.js + echo "\n\n$(curl https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js)" >> ssb-interop.js + # add any sed replacements here if you want a different theme. + kill `pgrep Slack` + sleep 2 + open /Applications/Slack.app +fi +``` + +![Automator](https://i.imgur.com/v3QPpjV.png) + +## Save +Then, save the document with a name you'll remember (something like `Slack Automate Theme`) in /Applications, +and replace Slack in your dock with the `Slack Automate Theme` app that's been created. +It will launch both Slack and the bash script to update the theme whenever you invoke the application. + +## Optionally change the icon of your custom app launcher. + +[Instructions for icon changing](https://apple.stackexchange.com/a/372/144132) From 0cb781ad8d0c53d2d534f639318d0a14c42b794b Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 09:35:30 -0600 Subject: [PATCH 03/10] Automation Start documentation for automating the js --- readme.md | 70 ++++++++++++------------------------------------------- 1 file changed, 15 insertions(+), 55 deletions(-) diff --git a/readme.md b/readme.md index 989b80d..6a2113c 100644 --- a/readme.md +++ b/readme.md @@ -14,68 +14,28 @@ Find your Slack's application directory. * 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` -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://cdn.rawgit.com/widget-/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; - } - ` - - // 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 +## Notice +You may 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. +## Manual js addition +You'll have to do this every time Slack updates. + +At the very bottom, add this js. + +[addEventListener JavaScript](addEventListener.js) + +## Automate js addition +- [ ] Windows: TODO +- [x] Mac: [Automator](automate-mac.md) +- [ ] Linux: TODO -NB: You'll have to do this every time Slack updates. +## That's it! +Restart Slack and see how well it works. # Color Schemes From e9b936d71480e6b5db58b59324db72e2b9912e6b Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 10:08:57 -0600 Subject: [PATCH 04/10] Move js to variable this is better for replacing colors and then injecting into the 2 required files. --- automate-mac.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/automate-mac.md b/automate-mac.md index 86b03a3..aa69626 100644 --- a/automate-mac.md +++ b/automate-mac.md @@ -19,15 +19,26 @@ open /Applications/Slack.app cd /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static $(grep -q slack-black-theme index.js) if [[ $? == 1 ]]; then - echo "\n\n$(curl https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js)" >> index.js - echo "\n\n$(curl https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js)" >> ssb-interop.js - # add any sed replacements here if you want a different theme. + addEventListener="\n\n$(curl https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js)" + # theme color changes -- here + echo "$addEventListener" >> index.js + echo "$addEventListener" >> ssb-interop.js kill `pgrep Slack` sleep 2 open /Applications/Slack.app fi ``` +### Optional Color Changes +This is an example of the One Dark theme automated also. +```sh +# theme color changes -- here +addEventListener=$(sed 's/primary: .*;/primary: #61AFEF;/' <<< $addEventListener) +addEventListener=$(sed 's/text: .*;/text: #ABB2BF;/' <<< $addEventListener) +addEventListener=$(sed 's/background: .*;/background: #282C34;/' <<< $addEventListener) +addEventListener=$(sed 's/background-elevated: .*;/background-elevated: #3B4048;/' <<< $addEventListener) +``` + ![Automator](https://i.imgur.com/v3QPpjV.png) ## Save From d894cbad010a5e3afd420eea4d95bca5b8d85d5d Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:27:21 -0600 Subject: [PATCH 05/10] Works on Windows 10 Pro --- automate-windows10.md | 72 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 automate-windows10.md diff --git a/automate-windows10.md b/automate-windows10.md new file mode 100644 index 0000000..c77560a --- /dev/null +++ b/automate-windows10.md @@ -0,0 +1,72 @@ +# Windows 10 Automation + +## Add this script +`cd %LOCALAPPDATA%\slack` + +create your file here... + +slack-black-theme.bat +```bat@echo OFF +REM Automatic Slack-Black-Theme Applicator +REM ::::::::::::::::::::OPTIONS::::::::::::::::::::: +SET "themeJS='https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js'" +REM ::::::::::::::::::::::::::::::::::::::::::::::::: +title Slack-Black-Theme-Addon +echo Set objArgs = WScript.Arguments > MessageBox.vbs +echo messageText = objArgs(0) >> MessageBox.vbs +echo MsgBox messageText >> MessageBox.vbs +cd %LOCALAPPDATA%\slack +Taskkill /F /IM slack.exe +TIMEOUT /t 5 /nobreak +start /wait slack.exe +TIMEOUT /t 15 /nobreak +FOR /F "delims=" %%X IN ('cd') DO SET origin=%%X +FOR /F "delims=" %%I IN ('dir /on /ad /b /t:c %LOCALAPPDATA%\slack\app-*') DO SET a=%%I +echo Applying addon to Latest Update: %a% +findstr /i /c:"Slack-Black-Theme-Addon" %LOCALAPPDATA%\slack\%a%\resources\app.asar.unpacked\src\static\index.js >nul || goto AppendSlackBlackTheme +start %origin%\MessageBox.vbs "Looks like Slack-Black-Theme is already a part of your Slack Desktop" +goto Cleanup +:AppendSlackBlackTheme +cd %LOCALAPPDATA%\slack\%a%\resources\app.asar.unpacked\src\static\ +:DownloadJS +powershell -Command "(New-Object Net.WebClient).DownloadFile( %themeJS%, 'addEventListener.js')" +echo.>>addEventListener-new.js +echo // Slack-Black-Theme-Addon>>addEventListener-new.js +echo.>>addEventListener-new.js +type addEventListener.js>>addEventListener-new.js +del addEventListener.js +ren addEventListener-new.js addEventListener.js +:CustomizeStyleHere +: This is an example of the One Dark theme automated also. +powershell "(gc addEventListener.js) -replace 'primary: .*;', 'primary: #61AFEF;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'text: .*;', 'text: #ABB2BF;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'background: .*;', 'background: #282C34;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'background-elevated: .*;', 'background-elevatedy: #3B4048;' | out-file addEventListener.js" +:AppendFile +type addEventListener.js >> index.js +type addEventListener.js >> ssb-interop.js +del addEventListener.js +cd ../../../../.. +: restart slack since it was updated +Taskkill /F /IM slack.exe +:ResumeAfterPatch +findstr /i /c:"Slack-Black-Theme-Addon" %LOCALAPPDATA%\slack\%a%\resources\app.asar.unpacked\src\static\index.js >nul || goto ErrorHandler +start %origin%\MessageBox.vbs "Slack-Black-Theme has been added to your Slack Desktop" +goto Cleanup +:ErrorHandler +start %origin%\MessageBox.vbs "Slack-Black-Theme could not be added to the destination. Try running the script as an administrator" +:Cleanup +ping -n 2 127.0.0.1 > nul +del %origin%\MessageBox.vbs +start /wait slack.exe +``` + +## shortcut - minimized + +change Icon to slack icon ... "%LOCALAPPDATA%\slack" + +![Icon](https://user-images.githubusercontent.com/801349/34311448-4b032e76-e723-11e7-919a-7146121a1222.png) + +## run as administrator + +![administrator](https://user-images.githubusercontent.com/801349/34311438-43a859bc-e723-11e7-9a9d-010c82965a8f.png) From 0fa954a35d986e812cada3e3b4a93fe85ebfb4a4 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:29:52 -0600 Subject: [PATCH 06/10] theme separation. --- automate-windows10.md | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/automate-windows10.md b/automate-windows10.md index c77560a..a07bea0 100644 --- a/automate-windows10.md +++ b/automate-windows10.md @@ -6,7 +6,8 @@ create your file here... slack-black-theme.bat -```bat@echo OFF +```batch +@echo OFF REM Automatic Slack-Black-Theme Applicator REM ::::::::::::::::::::OPTIONS::::::::::::::::::::: SET "themeJS='https://cdn.rawgit.com/Artistan/slack-black-theme/master/addEventListener.js'" @@ -37,11 +38,6 @@ type addEventListener.js>>addEventListener-new.js del addEventListener.js ren addEventListener-new.js addEventListener.js :CustomizeStyleHere -: This is an example of the One Dark theme automated also. -powershell "(gc addEventListener.js) -replace 'primary: .*;', 'primary: #61AFEF;' | out-file addEventListener.js" -powershell "(gc addEventListener.js) -replace 'text: .*;', 'text: #ABB2BF;' | out-file addEventListener.js" -powershell "(gc addEventListener.js) -replace 'background: .*;', 'background: #282C34;' | out-file addEventListener.js" -powershell "(gc addEventListener.js) -replace 'background-elevated: .*;', 'background-elevatedy: #3B4048;' | out-file addEventListener.js" :AppendFile type addEventListener.js >> index.js type addEventListener.js >> ssb-interop.js @@ -61,6 +57,18 @@ del %origin%\MessageBox.vbs start /wait slack.exe ``` +### optional colors + +`:CustomizeStyleHere` -- look for this line and add it there. + +```batch +: This is an example of the One Dark theme automated also. +powershell "(gc addEventListener.js) -replace 'primary: .*;', 'primary: #61AFEF;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'text: .*;', 'text: #ABB2BF;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'background: .*;', 'background: #282C34;' | out-file addEventListener.js" +powershell "(gc addEventListener.js) -replace 'background-elevated: .*;', 'background-elevatedy: #3B4048;' | out-file addEventListener.js" +``` + ## shortcut - minimized change Icon to slack icon ... "%LOCALAPPDATA%\slack" From 7f54041de88c8e5cbf5f5b936cd5f2d10bc3a086 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:30:49 -0600 Subject: [PATCH 07/10] windows10 --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 6a2113c..8d619ca 100644 --- a/readme.md +++ b/readme.md @@ -30,7 +30,7 @@ At the very bottom, add this js. [addEventListener JavaScript](addEventListener.js) ## Automate js addition -- [ ] Windows: TODO +- [x] Windows 10: (automate-windows10.md) - [x] Mac: [Automator](automate-mac.md) - [ ] Linux: TODO From e2ab53e178e2b6ec53f0ffb43f96fdc164c6fb85 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:31:45 -0600 Subject: [PATCH 08/10] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 8d619ca..dc10d14 100644 --- a/readme.md +++ b/readme.md @@ -30,7 +30,7 @@ At the very bottom, add this js. [addEventListener JavaScript](addEventListener.js) ## Automate js addition -- [x] Windows 10: (automate-windows10.md) +- [x] Windows 10: [Shortcut](automate-windows10.md) - [x] Mac: [Automator](automate-mac.md) - [ ] Linux: TODO From 6bb1e909dff515603edba56f08c37b01f5f649ce Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:44:45 -0600 Subject: [PATCH 09/10] task scheduler --- automate-windows10.md | 56 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/automate-windows10.md b/automate-windows10.md index a07bea0..f2ecbc5 100644 --- a/automate-windows10.md +++ b/automate-windows10.md @@ -78,3 +78,59 @@ change Icon to slack icon ... "%LOCALAPPDATA%\slack" ## run as administrator ![administrator](https://user-images.githubusercontent.com/801349/34311438-43a859bc-e723-11e7-9a9d-010c82965a8f.png) + + +## example for Task Scheduler + +this is an example that will schedule to do the same thing as the shortcut daily. You may want to try this if you do not want the alternate shortcut to open slack. + +```xml + + + + 2017-12-22T13:23:47.2746069 + Artistan + \Startup Slack + + + + 2017-12-22T08:20:00 + true + + 1 + + + + + + %USERSID% + Password + HighestAvailable + + + + IgnoreNew + true + true + true + false + false + + true + false + + true + true + false + false + false + PT72H + 7 + + + + %LOCALAPPDATA%\slack\theme.bat + + + +``` From ecae747dc93496ad7565b76547a26e68d696e4d7 Mon Sep 17 00:00:00 2001 From: Charles Peterson Date: Fri, 22 Dec 2017 14:49:36 -0600 Subject: [PATCH 10/10] cleanup and more definition --- automate-windows10.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/automate-windows10.md b/automate-windows10.md index f2ecbc5..cbcd08f 100644 --- a/automate-windows10.md +++ b/automate-windows10.md @@ -71,11 +71,18 @@ powershell "(gc addEventListener.js) -replace 'background-elevated: .*;', 'backg ## shortcut - minimized -change Icon to slack icon ... "%LOCALAPPDATA%\slack" +- copy and paste your bat file so it creates a shortcut +- update the shortcut properties (image below) + - change Icon to slack icon ... "%LOCALAPPDATA%\slack" + - set to minimized for running + - advanced + - run as administrator (image below) + +## properties ![Icon](https://user-images.githubusercontent.com/801349/34311448-4b032e76-e723-11e7-919a-7146121a1222.png) -## run as administrator +## advanced ![administrator](https://user-images.githubusercontent.com/801349/34311438-43a859bc-e723-11e7-9a9d-010c82965a8f.png)