Awesome
mtslack (Material Themed Slack)
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-BADGE:END -->Beautify your Slack application from a list of popular themes!!!
Deprecation notice
As Slack now blocked the ability to open DevTools, it's no longer possible to apply custom CSS to the Slack Window.
We had a good run, goodbye folks and thanks for the fish.
Features
Theme List:
- Material Oceanic
- Material Darker
- Material Palenight
- Material Lighter
- Material DeepOcean
- Material Forest
- Material Sky Blue
- Material Sandy Beach
- Material Volcano
- Monokai Pro
- Arc Dark
- Dracula
- GitHub
- GitHub Dark
- Atom One Dark
- Atom One Light
- Solarized Dark
- Solarized Light
- Night Owl
- Light Owl
- Moonlight
- SynthWave '84
Pledge
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 OpenCollective. [Become a sponsor]
Backers
Thank you to all our backers! 🙏 [Become a backer]
<a href="https://opencollective.com/atom-material-themes-and-plugins#backers" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/backers.svg?width=890"></a>
Check also : https://www.material-theme.com/docs/support-us/
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
<a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/0/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/1/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/2/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/3/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/4/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/5/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/6/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/7/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/8/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/atom-material-themes-and-plugins/sponsor/9/website" target="_blank"><img src="https://opencollective.com/atom-material-themes-and-plugins/sponsor/9/avatar.svg"></a>
Installation
Global installation (only for Unix based systems)
You will need node > 16 to use it.
-
Run
npm install -g mtslack
in a terminal (or runnpx mtslack
if you don't want to install it globally) -
Run the command
mtslack
-
You will be prompted with a menu the following options:
- Copy code to clipboard
- Show plugin version
-
Select Copy to clipboard to copy the code snippet to your clipboard.
-
Slack will open in dev mode:
export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app
-
Go to View -> Developer -> Toggle Dev Tools
-
In the Dev Tools Console tab, paste the code snippet
-
?????
-
PROFIT!!!!!!!
Troubleshooting
- I'm getting the following error after updating to version v25+:
internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/usr/local/lib/node_modules/mtslack/node_modules/chalk/source/node_modules/' imported from /usr/local/lib/node_modules/mtslack/node_modules/chalk/source/index.js
at packageMainResolve (internal/modules/esm/resolve.js:465:9)
at packageResolve (internal/modules/esm/resolve.js:607:14)
at moduleResolve (internal/modules/esm/resolve.js:659:14)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:752:11)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:50:40)
at link (internal/modules/esm/module_job.js:49:36) {
code: 'ERR_MODULE_NOT_FOUND'
-> That means you are using an older version of node. The plugin is now only compatible with ESM Modules, therefore older versions are not supported.
Please update to node v16 and reinstall mtslack
.
Slack Tweaks
Since version 2.0 you can also profit from a bunch of Slack Tweaks to make the application more enjoyable. You can find a button to open the Slack Tweaks on the channels sidebar.
Slack Tweak Control Panel
This panel controls which tweak toggles are available. This doesn't actually toggle the tweaks themselves!.
Once you've enabled a tweak, a new toggle button will appear on the Channel Header. Pressing on these buttons will activate the tweak.
You can also activate the toggle using a shortcut.
These settings are saved in the application's Local Storage.
Highlight Code [NEW!] (Ctrl+Alt+H)
Automatically detects code blocks and highlight then using highlight.js. You can annotate the code blocks by setting the language name as the first line.
Example: to annotate the code as a javascript code, write:
javascript
function foo() {
}
Modal Overlays (Ctrl+Alt+O)
This button will toggle an overlay to display whenever settings are open.
Dim Absent People (Ctrl+Alt+D)
This button will dim absent people from the sidebar, making the present ones more prominent.
Loop Over selected themes (Ctrl+Alt+T)
This button will loop over the available themes, allowing you to choose a theme in realtime.
Toggle Custom Font (Ctrl+Alt+F)
Switch the fonts used in the app with the font you've defined in the Slack Tweak Settings.
Toggle Custom Monospace Font (Ctrl+Alt+M)
Switch the monospace font size and family used in the app with the font you've defined in the Slack Tweak Settings.
Accent Color (Ctrl+Alt+A)
Switch the current theme's accent color with the one of your choice. You can set the desired color in the Slack Tweak Settings.
Links Color (Ctrl+Alt+L)
Switch the current theme's links color with the one of your choice. You can set the desired color in the Slack Tweak Settings.
Click to Edit
Double click on your messages to edit it. If you double click on other people's messages, it will copy it to clipboard.
Animations
Add animations to your Slack window.
Development
Building styles
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
Apply the styles
Using the WebApp
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.
Using the Electron app
- Run
npm run server
to run a local server - Run
watchStyles
orwatchScripts
to watch for changes in styles or code - Run
npm run local
to runapply
with the styles pointing to localhost - Run
npm run debug
IMPORTANT: Please make sure to have enabled "Disable cache when devtools is open" in Chrome Settings.
Also don't forget to re-apply the production styles before quitting :)
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
-
Windows:
export SLACK_DEVELOPER_MENU=true; ~/AppData/Local/slack.exe
-
Linux: Same as the others, but for Linux (depends whether installed from the Marketplace or from the Web)
License
Apache 2.0
Acknowledgements
Thanks to https://github.com/widget-/slack-black-theme for the idea!
License
Apache 2.0
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable -->`` <table> <tr> <td align="center"><a href="https://github.com/Saghen"><img src="https://avatars.githubusercontent.com/u/10467983?v=4" width="100px;" alt=""/><br /><sub><b>Saghen</b></sub></a><br /><a href="https://github.com/mallowigi/mtslack/issues?q=author%3ASaghen" title="Bugs, Infrastructure and Themes">🐛🚇🎨</a></td> <td align="center"><a href="https://github.com/daniloisr"><img src="https://avatars.githubusercontent.com/u/157134?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Danilo Resende</b></sub></a><br /><a href="https://github.com/mallowigi/mtslack/issues?q=author%3Adaniloisr" title="Bug reports">🐛</a></td> <td align="center"><a href="https://github.com/jlevier"><img src="https://avatars.githubusercontent.com/u/74258557?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jlevier</b></sub></a><br /><a href="https://github.com/mallowigi/mtslack/issues?q=author%3Ajlevier" title="Bug reports">🐛</a></td> <td align="center"><a href="https://github.com/sid-maddy"><img src="https://avatars.githubusercontent.com/u/10049286?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Siddhesh Mhadnak</b></sub></a><br /><a href="https://github.com/mallowigi/mtslack/issues?q=author%3Asid-maddy" title="Bug reports">🐛</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!