• 欢迎访问全栈之路
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

打造你炫酷的VS code编辑器,毛玻璃字体发光效果

前端工具 Torry.Yao 404次浏览

此文针对mac或linux,Windows下可能透明支持性不好,不提供解决方案 :!:
最终效果像下面这样:
s1
也有老兄整成下面这个样子:
微信截图_20190515151530
这个敲代码久了眼不瞎吗。

废话不多说了上重点。
1、

安装vs 扩展

Custom CSS and JS Loader
2、

a)创建一个样式文件:custom.css,负责整个编辑器的样式

html {
  background: transparent !important;
}

.scroll-decoration {
  box-shadow: none !important;
}

.minimap {
  opacity: 0.6;
}

.editor-container {
  background: transparent !important;
}

.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
.monaco-editor-background,
.monaco-editor .margin,
.monaco-workbench>.part>.content,
.monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
.monaco-workbench>.part>.title,
.monaco-workbench,
.monaco-workbench>.part,
body {
  background: transparent !important;
}

.editor-group-container>.tabs {
  background-color: rgba(37, 37, 37,0.2) !important;
}

.editor-group-container>.tabs .tab {
  background-color: transparent !important;
}

.editor-group-container>.tabs .tab.active {
  background-color: rgba(37, 37, 37,0.4) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.focused {
  outline-color: rgb(37, 37, 37,0.6) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.selected,
.monaco-list.settings-toc-tree .monaco-list-row.focused,
.monaco-list .monaco-list-row.selected,
.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
  background-color: rgb(37, 37, 37,0.6) !important;
}

.monaco-list.settings-editor-tree .monaco-list-row {
  background-color: transparent !important;
  outline-color: transparent !important;
}

.monaco-inputbox {
  background-color: rgba(41, 41, 41,0.2) !important;
}

.monaco-editor .selected-text {
  background-color: rgba(160, 171, 187, 0.7) !important;
}

.monaco-editor .focused .selected-text {
  background-color: rgba(172, 172, 172, 0.6) !important;
}

.mtk4{ color:#6c77b7}

.monaco-editor .view-overlays .current-line {
  border-color: rgba(41, 41, 41,0.2) !important;
}

.extension-editor,
.monaco-inputbox>.wrapper>.input,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
.preferences-editor>.preferences-header,
.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
.monaco-editor, .monaco-editor .inputarea.ime-input {
  background: transparent !important;
}

.editor-group-container>.tabs .tab {
  border: none !important;
}

b)创建一个js文件:custom.js,让窗体支持透明。

nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');

3) 在 settings.json 中添加如下代码,引入这两个文件


    "vscode_custom_css.imports": [
        "file:///Users/MyUserName/Documents/custom.css",
        "file:///Users/MyUserName/Documents/custom.js"
      ],
    "vscode_custom_css.policy": true

路径就是之前创建的css和js的文件地址。

4)之后运行按 Cmd+Shift+P

调出命令面板,找到命令“Reload Custom CSS and JS”,重启编辑器。

之后是不是编辑器就透明了。有没有点小激动,小高兴啊!

可能有的人高兴的太早了,怎么也不透明。那可能是electron 权限不够。

我们可以运行命令

sudo chown -R $(whoami) <Path to Code>

是vscode app包里的Ellectron位置,比如:

/Applications/Visual Studio Code.app/Contents/MacOS/Electron

获取也可以找到vscode.app,显示包内容,contents -> MacOS -> Electron 右键选择 显示简介,之后把权限都勾选上。

之后在重启vscode,基本上就大功告成了!

下面我们开始让它发光!

安装主题:SynthWave ’84

然后跟创建 custom.css方法一样,创建 synthwave84.css
之后导入到 setting.json中去。

然后 Reload Custom CSS and JS

就可以了。

PS:发光看久了眼累啊哈哈,SynthWave ’84提供了不发光版的css。

synthwave84-noglow.css

哈哈,看个人喜好吧!

如果你觉得主题还是跟你想要的差那么点意思的话,你可以再进一步自定义。使用开发者模式,打开方式:帮助 -> 切换开发人员工具(之后就跟Chrome调试网页一样了),找到对应的样式名,然后在custom.css中重新定义,记得最好加上 !important

谢谢,祝你顺利变身~


全栈之路 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明打造你炫酷的VS code编辑器,毛玻璃字体发光效果
喜欢 (2)