1 Unstar Star 3 Fork 0

Jiang / BeautifulCSS

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
vscode终极美化 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

vscode-transparent-glow

transparent vscode css

原文链接 https://jinkey.ai/post/tech/ru-he-pei-zhi-tou-ming-fa-guang-de-sao-qi-vscode 转载请注明出处

1 安装自定义 JS 和 CSS 插件

插件截图

2 安装发光主题

插件截图

3 添加样式配置文件

在 VSCode 安装目录(自己随便选择一个文件夹也可以),放入以下文件。 为了方便下载,文件整理到了 Github-Jinkeycode/vscode-transparent-glow,欢迎 star。

enable-electron-vibrancy.js 开启 electron 透明支持

vscode-vibrancy-style.css 这里使用 @孤狼 大佬提供的样式

synthwave84.css 文字发光样式,样式请在 Github 获取。如果要不发光的,可以使用 synthwave84-noglow.css。可以 watch https://github.com/robb0wen/synthwave-vscode 保持更新通知。

toolbar.css 引入以上大神的样式配置之后,左边导航栏有部分标题还是未透明状态,我自己修改了配置,引入即可。

terminal.css 使 vscode 内置的终端透明

终端光标颜色修改,由@manonloki 提供

.panel.integrated-terminal .xterm-cursor,
.xterm-cursor-block {
  background: rgb(210, 0, 252) !important;
}

4 修改 VSCode 配置文件

点击上图 在 setting.json 中编辑,打开后加入配置(不需要大括号,直接把 key-value 加入原有 json 即可): setting.json

5 重加载

按下 Ctrl + Shift + P,运行 "Reload Custom CSS and JS", 重启 vscode 即可。如果提示VSCode 已经损坏,选择右上角齿轮“不再提示”即可。

6 总结

成品效果如图,不懂的可以加小助手微信 udujjb 拉你进群询问

以上教程是基于 MacOS 的,Linux 用户如何开启透明请参考;Windows 的electron暂不支持vibrancy模式,可以使用插件 GlassIt-VSC 设置透明。

Custom CSS and JS Loader 配置

Linux 透明窗口

Comments ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/qq34347476/Beautiful.git
git@gitee.com:qq34347476/Beautiful.git
qq34347476
Beautiful
Beautiful
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542