Skip to content
This repository was archived by the owner on Jul 8, 2022. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions addEventListener.js
Original file line number Diff line number Diff line change
@@ -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);
})
});
});
});
51 changes: 51 additions & 0 deletions automate-mac.md
Original file line number Diff line number Diff line change
@@ -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)
143 changes: 143 additions & 0 deletions automate-windows10.md
Original file line number Diff line number Diff line change
@@ -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
<?xml version="1.0" encoding="UTF-16"?>
<Task version="1.2" xmlns="http://schemas.microsoft.com/windows/2004/02/mit/task">
<RegistrationInfo>
<Date>2017-12-22T13:23:47.2746069</Date>
<Author>Artistan</Author>
<URI>\Startup Slack</URI>
</RegistrationInfo>
<Triggers>
<CalendarTrigger>
<StartBoundary>2017-12-22T08:20:00</StartBoundary>
<Enabled>true</Enabled>
<ScheduleByDay>
<DaysInterval>1</DaysInterval>
</ScheduleByDay>
</CalendarTrigger>
</Triggers>
<Principals>
<Principal id="Author">
<UserId>%USERSID%</UserId>
<LogonType>Password</LogonType>
<RunLevel>HighestAvailable</RunLevel>
</Principal>
</Principals>
<Settings>
<MultipleInstancesPolicy>IgnoreNew</MultipleInstancesPolicy>
<DisallowStartIfOnBatteries>true</DisallowStartIfOnBatteries>
<StopIfGoingOnBatteries>true</StopIfGoingOnBatteries>
<AllowHardTerminate>true</AllowHardTerminate>
<StartWhenAvailable>false</StartWhenAvailable>
<RunOnlyIfNetworkAvailable>false</RunOnlyIfNetworkAvailable>
<IdleSettings>
<StopOnIdleEnd>true</StopOnIdleEnd>
<RestartOnIdle>false</RestartOnIdle>
</IdleSettings>
<AllowStartOnDemand>true</AllowStartOnDemand>
<Enabled>true</Enabled>
<Hidden>false</Hidden>
<RunOnlyIfIdle>false</RunOnlyIfIdle>
<WakeToRun>false</WakeToRun>
<ExecutionTimeLimit>PT72H</ExecutionTimeLimit>
<Priority>7</Priority>
</Settings>
<Actions Context="Author">
<Exec>
<Command>%LOCALAPPDATA%\slack\theme.bat</Command>
</Exec>
</Actions>
</Task>
```
70 changes: 15 additions & 55 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down