Beautify your Slack application from a list of popular themes!!!
Currently works only for Mac OSx
Theme List:
- Material Oceanic
- Material Darker
- Material Palenight
- Material Lighter
- Material DeepOcean
- Monokai Pro
- Arc Dark
- Dracula
- GitHub
- Atom One Dark
- Atom One Light
- Solarized Dark
- Solarized Light
- Night Owl
- Light Owl
If you like this plugin, you can buy me a beer (or a coffee, or something else) using PayPal
You can also support this theme by subscribing to the Material Theme OpenCollective. [Become a sponsor]
Thank you to all our backers! 🙏 [Become a backer]
Check also : http://www.material-theme.com/docs/support-us/
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
IMPORTANT NOTE
This application tampers with the installed Slack application. Therefore, it is HEAVILY RECOMMENDED to do a backup copy of Slack before running the app.
Go to your Applications folder, find the Slack.app
, then copy and paste to create the backup. To restore, simply delete the Slack.app
and copy back from the backup (or simply redownload it).
The Slack folder is located in /usr/lib/slack
(at least in Ubuntu). Copy this folder and create a copy in your home directory. To restore, either do sudo mv /home/slack /usr/lib
or redownload it.
- Clone this repository
- Make sure you have nodejs installed
- Run the self-executable:
./main
If you encounter an error, such as this one,
operation not permitted, copyfile '/Applications/Slack.app/Contents/Resources/app.asar'
try running the self-executable in sudo mode.
sudo ./main
-
You will be prompted with a menu with two options:
- Apply Theme
- Remove Theme
-
Select Apply Theme to be prompted with a list of themes to choose with.
-
Open or Restart (with Cmd-Q) Slack
-
?????
-
PROFIT!!!!!!!
- Clone this repository
- Install NodeJS if you didn't do it yet (https://nodejs.org/en/download/)
- Run
npm install
- Run
npm run apply
- Select Apply in the menu, then select a theme from the predefined themes.
- Open or Restart (with Cmd-Q) Slack
- ??????
- PROFIT!!!!!!
The best way to revert to the default theme would be to use the backup copy you made and overwrite the patched Slack.app
There is also a Remove Theme
option in the menu but it is less robust.
This project consists in two parts:
- The CLI, used for applying the styles
- The Styles, written with Sass (Node-sass)
The cli is found in the lib
directory while the styles are found in the styles
directory.
Then run npm run styles
or npm run debugStyles
to compile the scss files in dist/slack.min.css
or dist/slack.css
Open Slack on the browser. It has the useful Developer Tools available to them so you can debug with ease.
To test your CSS, install a Stylish-like extension (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) then create a new style for slack and paste the CSS inside and save.
You should already see all your styles applied. Please note that there are some differences between the web app and the native app.
First of all install and run a web server
npm i -g http-server
http-server .
You can now have access to the current project directory. Particularly the dist/slack.css
where the magic happens.
Then changes the url in lib/consts.js
to point to http://localhost:8080/dist/slack.css
to use your local styles.
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: (todo)
-
Windows: (todo)
In addition to running the required modifications, you will likely want to add auto-reloading:
const cssPath = 'http://localhost:8080/dist/slack.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(cssPath, reloadCss);
Apache 2.0
Thanks to https://github.com/widget-/slack-black-theme for the idea!
Apache 2.0