炫酷的VS Code毛玻璃效果

VS Code 开启毛玻璃效果以及霓虹主题

效果：

必要插件

1、Custom CSS and JS Loader

首先安装插件：Custom CSS and JS Loader

用于自定义CSS和JS

2、SynthWare 84

关键字高亮主题、霓虹主题

vscode 设置

安装上述主题后，在 setting.json 里面加：

"terminal.integrated.rendererType": "dom"

样式配置

在任意位置新建两个文件(不会移动的位置，如桌面)：

custom.css

:root{
--vibrancy-dark: rgba(0,0,0,.2);
--vibrancy-light: rgba(255,255,255,.2);
}
html {
background: transparent !important;
}.scroll-decoration {
box-shadow: none !important;
}.minimap {
opacity: 0.6;
background-color: transparent !important;
}.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; */
background: transparent !important;
/* box-shadow: 0 1px 10px -2px gray; */
}.editor-group-container>.tabs .tab {
background-color: transparent !important;
}.editor-group-container>.tabs .tab.active * {
color: #fff !important;
background-color: transparent !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; */
color: #00aaee;
}.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(58, 61, 65,0.6) !important;
}.monaco-editor .focused .selected-text {
background-color: rgba(38, 79, 120,0.6) !important;
}.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;
}
.panel.integrated-terminal,
.panel.integrated-terminal *{
background: transparent !important;
}

custom.js

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

VsCode设置

在 vscode 的设置中添加如下代码：

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

VsCode命令

在vscode 中执行命令（Commond+Shift+P）：

Reload Custom CSS and JS

友情提示：这个效果只能在MacOS 上开启实现毛玻璃，因为electron 在 Windows上不支持透明窗体。

参考
https://www.fairyever.com/posts/vscode-beautify

今日寄语：

旅途中我们或许会丢失太阳，有的人选择继续寻找太阳，而有的人用别的东西取代了太阳。最后，有的人仍热活在白天，而有的人活在白夜。——《白夜行》

欢迎关注个人微信公众号：桃李报春

炫酷的VS Code毛玻璃效果相关推荐

jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离 1. [代码]jquer ...
的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果
做个炫酷的图片切换过度效果首先,今天是520节日.到了520这类为情侣准备的节日,小编都会感到一万点暴击-- 首先酸一波,搞点事情(蹭波热度). 给大家分享一个520特效页面:看完记得回来为小编点个 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
炫酷的汽车换色效果分享——X战警魔形女变身
炫酷的汽车换色效果--X战警魔形女原理: 1.使用ComputeShader在汽车网格上散布很多随机点,记下这些点的位置和法线. 2.使用DrawMeshInstancedIndirect在上面计算 ...
【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果: HTML代码如下: <!doctype html> <html lang="zh"> <head><meta charset= ...
炫酷canvas网页背景动画效果
下载地址非常炫酷的网页背景旋转特效,基于canvas画布实现的网页背景动画效果 dd:
js制作的炫酷3D太阳系行星运行效果
想象着打开网页就能浏览太阳系行星的运行情况,促进我们更好的了解这个宇宙星空,于是找到了这样一段代码可以完美的实现这个功能,通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况,效果炫酷 ...
炫酷的汽车幻化为粒子效果分享
先上效果链接: https://www.bilibili.com/video/av75962636/ 之前在做动画的时候见到有人用Krakatoa粒子做过类似的效果,其中有些方法和技巧很值得借鉴,所以 ...
mapv结合百度地图treejs实现炫酷三维大数据可视化效果
随着大数据.云计算.物联网的诞生.大量的设备数据.传感器数据.行为数据.日志数据.基础画像数据.运行数据等等都对传统的数据展现提出了新的要求 .随着前端技术的不断成熟,客户对业务系统的要求也由原来的简 ...