mtslack(Material 主题风格 Slack)
从众多流行主题中美化你的 Slack 应用!!!
重要通知
从 4.22.0 版本开始,由于 Slack 修复了添加自定义代码的选项,因此不再有方法来修补 Slack 应用。
这是可以理解的,因为这样做可能允许人们向应用注入恶意代码(当然,本插件并非如此)。
因此,这个优秀的插件将不再修补 Slack 应用;相反,它将生成一段代码片段,可以粘贴到 Slack 应用中以手动注入主题。
目前仅适用于 Mac OS 和 Linux,因为它使用 pbcopy
来处理复制到剪贴板。欢迎为 Windows 版本做出贡献。
主题列表:
- 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
赞助
如果你喜欢这个插件,可以通过 PayPal 给我买杯啤酒(或咖啡,或其他东西)
你也可以通过订阅 OpenCollective 来支持这个主题。[成为赞助者]
支持者
感谢所有支持者!🙏 [成为支持者]
另请查看:https://www.material-theme.com/docs/support-us/
赞助商
通过成为赞助商来支持这个项目。您的logo将显示在这里,并链接到您的网站。[成为赞助商]
安装
全局安装(仅适用于基于Unix的系统)
您需要node > 16才能使用它。
-
在终端中运行
npm install -g mtslack
(或者如果您不想全局安装,可以运行npx mtslack
) -
运行命令
mtslack
-
您将看到一个菜单,提供以下选项:
- 将代码复制到剪贴板
- 显示插件版本
-
选择复制到剪贴板将代码片段复制到您的剪贴板。
-
Slack将以开发模式打开:
export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app
-
转到 查看 -> 开发者 -> 切换开发者工具
-
在开发者工具的控制台标签中,粘贴代码片段
-
?????
-
大功告成!!!!!
故障排除
- 更新到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'
}
这意味着您正在使用较旧版本的Node.js。该插件现在只与ESM模块兼容,因此不支持旧版本。
请更新到Node.js v16并重新安装mtslack
。
Slack调整功能
从2.0版本开始,您还可以使用一系列Slack调整功能来让应用更加好用。您可以在频道侧边栏找到打开Slack调整功能的按钮。
Slack调整控制面板
此面板控制哪些调整功能开关可用。这实际上并不会切换调整功能本身!
一旦您启用了某个调整功能,频道标题栏上就会出现一个新的开关按钮。按下这些按钮将激活相应的调整功能。
您还可以使用快捷键来激活开关。
这些设置保存在应用程序的本地存储中。
代码高亮 [新功能!] (Ctrl+Alt+H)
自动检测代码块并使用highlight.js进行高亮显示。您可以通过在第一行设置语言名称来注释代码块。
例如:要将代码注释为JavaScript代码,请写:
javascript
function foo() {
}
模态覆盖层 (Ctrl+Alt+O)
此按钮将在打开设置时切换显示覆盖层。
淡化离线人员 (Ctrl+Alt+D)
此按钮将淡化侧边栏中离线的人员,使在线人员更加突出。
循环切换选定主题 (Ctrl+Alt+T)
此按钮将循环切换可用的主题,让您实时选择主题。
切换自定义字体 (Ctrl+Alt+F)
将应用程序中使用的字体切换为您在Slack调整设置中定义的字体。
切换自定义等宽字体 (Ctrl+Alt+M)
将应用程序中使用的等宽字体大小和字体系列切换为您在Slack调整设置中定义的字体。
强调色 (Ctrl+Alt+A)
将当前主题的强调色切换为您选择的颜色。您可以在Slack调整设置中设置所需的颜色。
链接颜色 (Ctrl+Alt+L)
将当前主题的链接颜色切换为您选择的颜色。您可以在Slack调整设置中设置所需的颜色。
点击编辑
双击您的消息即可编辑。如果双击其他人的消息,则会将其复制到剪贴板。
动画
为您的Slack窗口添加动画效果。
开发
构建样式
本项目由两部分组成:
- CLI,用于应用样式
- 样式,使用Sass(Node-sass)编写
CLI位于lib
目录,而样式位于styles
目录。
然后运行npm run styles
或npm run debugStyles
将scss文件编译为dist/slack.min.css
或dist/slack.css
应用样式
使用Web应用
在浏览器中打开Slack。它提供了有用的开发者工具,方便您进行调试。
要测试您的CSS,请安装类似Stylish的扩展(https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en),然后为Slack创建一个新样式,将CSS粘贴进去并保存。
您应该已经看到所有样式已应用。请注意,Web应用和原生应用之间存在一些差异。
使用Electron应用
- 运行
npm run server
启动本地服务器 - 运行
watchStyles
或watchScripts
监视样式或代码的变化 - 运行
npm run local
执行apply
,将样式指向localhost - 运行
npm run debug
重要提示:请确保在Chrome设置中启用了"开发者工具打开时禁用缓存"。
同时别忘了在退出前重新应用生产样式 :)
您需要启用开发者模式来检查各项内容,而不是正常启动Slack。
-
Mac:
export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app
-
Windows:
export SLACK_DEVELOPER_MENU=true; ~/AppData/Local/slack.exe
-
Linux: 与其他系统类似,但具体取决于是从应用商店还是网页安装的
许可证
Apache 2.0
致谢
感谢 https://github.com/widget-/slack-black-theme 提供的灵感!
许可证
Apache 2.0
贡献者 ✨
感谢这些优秀的人(表情符号键):
本项目遵循all-contributors规范。 欢迎任何形式的贡献!