Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Nockiro/slack-black-theme
A darker, more contrasty, Slack theme.
https://github.com/Nockiro/slack-black-theme
Last synced: 3 months ago
JSON representation
A darker, more contrasty, Slack theme.
- Host: GitHub
- URL: https://github.com/Nockiro/slack-black-theme
- Owner: Nockiro
- License: apache-2.0
- Fork: true (antonio-vr/slack-black-theme)
- Created: 2018-07-20T22:11:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-30T10:45:14.000Z (over 4 years ago)
- Last Synced: 2024-01-22T03:47:53.477Z (5 months ago)
- Language: CSS
- Homepage:
- Size: 271 KB
- Stars: 228
- Watchers: 14
- Forks: 61
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Lists
- awesome-stars - slack-black-theme
README
# Slack Black Theme
A darker, more contrasty, Slack theme.
### Please note: Slack now has its own [dark theme](https://slackhq.com/dark-mode-for-slack-desktop) that is quite similar to the one of this repository and, frankly, a bit more optimized.
Nevertheless, feel free to report any bugs on this since it still can be used to modify the theme of slack.
Also, it might be a good idea to enable slacks own dark theme even if you are using the default theme of this repository, just for getting a few optimizations the slack team made.
# Preview
# Installing into Slack
0. Make sure slack is not running
## Via script (automatic "installer" for version 3/4)
### On Windows
1. Make sure [7-zip](https://7-zip.de/download.html) is installed
2. Make sure the [asar-plugin for 7-zip](http://www.tc4shell.com/en/7zip/asar/) is installed
3. Execute slackBlack.ps1 (Thanks to [Anthony Northrup](https://github.com/anthonynorthrup314/) and [tarantulae](https://github.com/tarantulae) on whose scripts this is largely based)
### On Unix (MacOS/Linux)
1. Make sure nodejs/npm are installed (`sudo apt install nodejs npm`)
2. Make sure the asar package is installed (`sudo npm i -g npx asar`)
3. Execute darkSlack.sh (Thanks to [smitt04](https://github.com/smitt04) on whose script this is based)
## Manually
Find your Slack's application directory.
* Windows: `%homepath%\AppData\Local\slack\`
* Mac: `/Applications/Slack.app/Contents/`
* Linux: `/usr/lib/slack/` (Debian-based)
### For version 4.0.0+
3. Go to folder "resources"
4. Open app.asar with 7-zip
5. In 7-zip, view the file (with right-click on the file) to `app\dist\ssb-interop.bundle.js` and add the code from the file "interjectCode.js"
6. Save **and close the editor**, then press "OK" on the question whether the archive is to be updated.
### For versions up to Slack 3
Append the code the code from the file "interjectCode.js" to the following files:
* `resources\app.asar.unpacked\src\static\index.js`
* `resources\app.asar.unpacked\src\static\ssb-interop.js`
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.
# 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
# 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
# Color Schemes
Here's some example color variations you might like.
## Default
```
--primary: #09F;
--text: #CCC;
--background: #080808;
--background-elevated: #222;
```
## One Dark
```
--primary: #61AFEF;
--text: #ABB2BF;
--background: #282C34;
--background-elevated: #3B4048;
```
## Low Contrast
```
--primary: #CCC;
--text: #999;
--background: #222;
--background-elevated: #444;
```
## Navy
```
--primary: #FFF;
--text: #CCC;
--background: #225;
--background-elevated: #114;
```
## Hot Dog Stand
```
--primary: #000;
--text: #FFF;
--background: #F00;
--background-elevated: #FF0;
```