vscode自定义高亮霓虹灯效果主题
2024-04-10 00:09:09
参考：https://github.com/robb0wen/synthwave-vscode 做了部分调整
SynthWave '84 这个主题不建议使用，实用效果不好。（虽然很‘炫’
myTheme.css
.mtk3 {color: #f92aad;text-shadow: 0 0 2px #100c0f, 0 0 4px #dc078e33, 0 0 8px #fff3;
}.mtk4 {color: #6d77b3;
}.mtk5 {color: #f97e72;
}.mtk6 {color: #fdfdfd;text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 4px #03edf975, 0 0 6px #03edf975;
}.mtk7 {color: #fff5f6;text-shadow: 0 0 2px #000, 0 0 7px #fc1f2c75, 0 0 4px #fc1f2c75, 0 0 15px #fc1f2c75;
}.mtk8 {color: #72f1b8;text-shadow: 0 0 2px #100c0f, 0 0 5px #257c5575, 0 0 15px #21272475;
}.mtk9 {color: #f4eee4;text-shadow: 0 0 2px #393a33, 0 0 6px #f39f0575, 0 0 2px #f39f0575;
}/* Add the subtle gradient to the editor background */
.monaco-editor {background-color: transparent !important;background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);background-size: auto 100vh;background-position: top;background-repeat: no-repeat;
}/* Sweet sunset dots */
.monaco-workbench .activitybar>.content .monaco-action-bar .badge .badge-content {background: linear-gradient(to bottom, #fff951 25%, #fc28a8);
}/* Active tab neon */
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active {box-shadow: inset 0 -5px 25px #fc28a825;position: relative;
}/* Active tab stripe */
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.active::after {content: '';position: absolute;bottom: -1px;left: 0;right: 0;height: 4px;background: linear-gradient(to right, #fc28a8, #03edf9) !important;opacity: 1;z-index: 6;
}.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit::after {content: '';position: absolute;bottom: -1px;left: 0;right: 0;height: 0px;transition: opacity 1s;opacity: 0;z-index: 6;
}/* Active sidebar item */
.monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked {box-shadow: inset 0 -5px 25px #fc28a825;position: relative;
}.monaco-workbench .activitybar>.content .monaco-action-bar .action-item.checked::after {content: '';position: absolute;bottom: 0px;top: 0px;left: 0px;width: 4px;background: linear-gradient(to bottom, #fc28a8, #03edf9) !important;opacity: 1;
}.monaco-workbench .activitybar>.content .monaco-action-bar .action-item::after {content: '';position: absolute;bottom: 0px;top: 0px;left: 0px;width: 0px;transition: opacity 1s;opacity: 0;
}/* update lightbuld to be neon */
.lightbulb-glyph {background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important;filter: drop-shadow(0 0 5px #03edf9);
}安装插件：Custom CSS and JS
然后在 settings.json 中添加
"vscode_custom_css.policy": true,//自定义主题
"vscode_custom_css.imports": ["file:///C:/Users/Default/myTheme.css" //个人样式路径],然后 启动 Custom CSS and JS插件
重启vscode
以上效果已经实现了，个人感觉还是需要一个不错的主题来配合使用，结合实用性推荐扩展：Dark++ Theme
vscode自定义高亮霓虹灯效果主题相关推荐
- vscode 自定义小清新主题色
vscode 自定义小清新主题色 作为一个弱小卑微的社畜怎么还不能拥有可可爱爱的编辑器,记录生活中的亿点点自娱自乐 步骤一 打开settings.json文件 windows: ctrl + shif ...
- 如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果
如何让你在Chrome浏览器开发者工具中查看源代码的时候,和在代码编辑器中有同样的代码语法高亮的效果,而且还是深色主题,如果你是深色主题的爱好者就更合你意了. 国外的美女开发者为你实现了这样功能的浏览 ...
- 浅析 VSCode 代码高亮实现原理
Vscode 的代码高亮.代码补齐.错误诊断.跳转定义等语言功能由两种扩展方案协同实现,包括: 基于词法分析技术,识别分词 token 并应用高亮样式 基于可编程语言特性接口,识别代码语义并应用高亮样 ...
- vscode 插件--汉化、主题、字体
一.汉化中文(官方下载默认为英文,英文好的小伙伴可直接跳过这步) 点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体 然后右边会弹出如下图安装界面,接着点击 Install 安装 安 ...
- 介绍一个能够对日志文件进行自定义高亮的 VS Code 扩展
程序员日常工作中总是需要分析不少日志文件. 日志文件可以用默认的文本编辑器打开,但是缺乏语法高亮效果,下面是一个例子: 可以尝试安装这个 Visual Studio Code 扩展:Log File ...
- 霓虹灯效果 函数 作用域
1.霓虹灯效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- Qt在win10自定义标题栏，应用主题颜色到标题栏
Qt在win10自定义标题栏,应用主题颜色到标题栏 前言 先看效果 关键点 QtWin 注册表获取是否应用了颜色到标题栏 代码 头文件:captionwidget.h 源文件:captionwidge ...
- vscode 自定义编辑器样式 css修改
vscode 自定义编辑器样式 CSS修改 看看别人插件 background background-cover 自己修改样式 1.打开vscode 配置文件 setting.json 2.修改上面提 ...
- 自定义Typora护眼色主题
自定义Typora护眼色主题 原文链接 https://blog.csdn.net/u011622109/article/details/78313850?utm_source=blogxgwz3 配 ...
最新文章
- 最新（2019/3）CSDN博客Markdown编辑格式说明，包含效果图
- 话说文件系统——aufs源码分析（三）【转】
- 机器人攻牙_惠东攻牙机
- Activity加载View调用顺序
- 静态顺序表的基本操作
- OpenCL 第7课:旋转变换(1)
- jsp+servlet+java 实现统计在线人数
- rabbitmq配置文件字段spring.rabbitmq.publisher-confirms过时
- 深度学习编译：MLIR初步
- ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
- 云图说｜Git云上仓库哪家好？一张图了解华为云代码托管服务
- c 数据压缩算法_Redis存储总是心里没底？你大概漏了这些数据结构原理
- jitpack发布_JitPack –发布您的Android库
- 十分钟完成的操作系统编写 你信吗？
- Zmodem协议工作原理
- 毛世怀HPDS2017公路路面设计程序系统
- 计算机局域网访问受限制,电脑本地连接受限制的处理方法
- Flutter(十七) 实现国际化
- Cannot find entry in either framework or device manifest
- 【专栏集合】ConcurrentHashMap