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); + }) + }); + }); +}); diff --git a/automate-mac.md b/automate-mac.md new file mode 100644 index 0000000..aa69626 --- /dev/null +++ b/automate-mac.md @@ -0,0 +1,51 @@ +# 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 + 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 +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) diff --git a/automate-windows10.md b/automate-windows10.md new file mode 100644 index 0000000..cbcd08f --- /dev/null +++ b/automate-windows10.md @@ -0,0 +1,143 @@ +# Windows 10 Automation + +## Add this script +`cd %LOCALAPPDATA%\slack` + +create your file here... + +slack-black-theme.bat +```batch +@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 +: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 +``` + +### 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 + +- 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) + +## advanced + +![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 + + + +``` diff --git a/readme.md b/readme.md index 989b80d..dc10d14 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 +- [x] Windows 10: [Shortcut](automate-windows10.md) +- [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