如何制作专属的VS Code主题
1、color的工作原理。
使用快捷键 Ctrl+Shift+P, 输入 Open settings, 选择非default的settings.json文件点击:
尝试添加以下配置:
可以看到tab.activeBackground这个属性将当前使用文件的标签背景渲染为红色了。
其余相关配置参考:Visual Studio Code User and Workspace Settings
里面有上百种颜色方案,这既让人兴奋又不知所措。
2、color用途分类
这些颜色属性大致可以分为两大类:
- 应用颜色 (程序本身颜色)包括标题栏、选项卡、菜单、滚动栏、一般性文本等。
- 符号颜色 (如代码高亮)。
3、*使用VS Code扩展生成器
方便我们之后发布在VS Code 主题市场,需要它的扩展/自定义模板文件。
https://github.com/microsoft/vscode-generator-code
https://www.npmjs.com/package/generator-code
参考以上文档,下载依赖:
npm install -g yo generator-code
全局安装方便日后管理。
启动生成器:
yo code
你需要回答几个必要的问题,使用方向键+enter选择即可(后面蓝字是填写内容)。
回答完毕,它将在本地初始化一个git 仓库(文件名为第三个选项所填内容)。
4、编辑xxx--color-theme.json
当然打开文件,你会发现这有600来行,如果死脑筋的话,可能明天就要埋了。难道要一个一个看着改吗?这里有个小技巧!——使用Theme Debugger来预览颜色效果。
它会弹出一个新窗口,一旦做了任何改动,重启debugger就能看到效果了。
另外还有个问题,我们如何知道一个属性和作用范围是映射到theme的那一地方呢?(一些关键字的替换也是不知道的)
第二个技巧就是命令面板开启Token and Scopes Inspector,如下:
鼠标悬浮在selector上,弹出相关信息(语种,类型,前景色,背景色,对比度,文本匹配范围)
这里添加了一个属性,发现Extension Development Host 对应的窗口边框变成了定义的颜色。
逐一遍历属性并修改是很头疼的,毕竟谁也不想做费时又费力的事。
在线主题颜色生成器:VS Code Theme Color Generator - Coder Coder
按照个人喜好设计,最后将定义好的theme json文件复制粘贴就好了。如果你不知道怎样选取颜色,推荐到 Coolors - The super fast color palettes generator!上找找灵感,或者到 Image to Colors Palette Generator - Extract Colors from Image寻找合适的视觉体验。
5、发布主题
- 登录Microsoft Azure DevOps。
- 创建一个组织。
- 注册你的主题扩展。
- 发布
- 在社交媒体上吹嘘它(·...·)
填写好相关信息,点击Continue。
经过验证后,定向到个人仪表板界面:
点击用户头像旁边的User settings,选择Personal access tokens(用于身份认证)。
点击 +New Token,按以下信息填入(不懂的自行百度吧):
别忘了拷贝你的token哦!!!
导航至https://marketplace.visualstudio.com/manage/createpublisher?managePageRedirect=true
只需要填写Basic information即可:
点击Create(可能需要验证)。
回到主题扩展文件中,完善package.json中的消息:
以及自定义好README.md文件内容。
万事俱备,只差最后一哆嗦了。
参考官网: Publishing Extensions | Visual Studio Code ExtensionAPI
vsce,“Visual Studio Code Extensions”的缩写,是一个用于打包、发布和管理 VS Code 扩展的命令行工具。
安装vsce命令:
npm install -g vsce
以Publisher身份登录:
vsce login <YourPublisherName>
随后要求你输入token进行验证。
打包为一个xxx.vsix文件( 输出在根目录):
vsce package
发布命令:
vsce publish
大功告成!!!
在vscode market, Manager Publisher & Extensions中查看:
在marketplace.visualstudio中展示的详情:Menon Dark - Visual Studio Marketplace
以上就是我开发vscode主题扩展的初体验,如果喜欢的话,可以试试这个主题哦!
参考资料:
Creating a VS Code Theme | CSS-Tricks - CSS-Tricks
https://www.youtube.com/watch?v=QCqWzb-9Sy8
如何制作专属的VS Code主题相关推荐
- vscode最好看的主题推荐_2017年最佳 VS Code 主题
我不知道你怎么样,但我喜欢在一个具有视觉吸引力的环境中编写代码.除了虚荣装逼之外,一个好的主题(和好的字体,因为好的主题应该带有好的字体)可以使你的代码看起来不那么无聊.有些主题甚至用配色方案指出代码 ...
- 2022 年最受欢迎的 19个 VS Code 主题排行榜
2022 年最受欢迎的 19 个 VS Code 主题排行榜 微软的 VS Code 凭其丰富的扩展受到众多开发者的青睐,俺总结了 2021 年最受欢迎的15 个 VS Code 主题(按 VS Co ...
- ps--添加眼影效果---调整逆光照片的步骤---制作专属星空头像
1,添加眼影效果步骤 选择套索工具,框选出人物眼部周围部分,shift+f6羽化适当像素(羽化值根据图片大小决定) 小太极图标添加纯色图层,颜色选择你需要的眼影颜色,双击纯色图层的蒙版,将羽化值适当提 ...
- 计算机专业海报加文字,PS制作简洁漂亮的文字主题海报 -电脑资料
这篇教程向的朋友们介绍PS制作简洁漂亮的文字主题海报的方法,效果图大致由主体文字及背景装饰两大部分构成, FEVTE编注:更多PS教程讨论交流和PS作品请到论坛PS交流区,地址:http://bbs. ...
- 手机如何剪辑音频,极简操作制作专属BGM和铃声
视频行业的蒸蒸日上,也催发了音乐的发展,音乐不单单是供我们休闲娱乐,听一听也能放松心情,还可以配合视频剪辑增强视频节奏.我们可以通过音频剪辑工具将歌曲的副歌部分进行剪辑合并,做成自己的专属BGM和铃声 ...
- vs code主题_VS Code的10个Pretty Light主题
vs code主题 The number of options you have when it comes to selecting a theme for VS Code is almost in ...
- 下载W ndows桌面,《如何制作WndowsMoble手机的桌面主题.doc
<如何制作WndowsMoble手机的桌面主题 如何制作Windows Mobile手机的桌面主题 如何制作Windows Mobile手机的桌面主题 [口袋数码- 新手入门]在本文中,我们将讲 ...
- html个人主题制作,【Html】pelican主题的制作之模板
概述 此次论述的是pelican的theme的构成以及如何创建属于自己的theme. 第一部分,模板. 观看此系列文章要求: 掌握基本的Html语法. 了解本次创建主题使用的Bootstrap提供的一 ...
- vscode怎么引用css_今天来安装一个骚气的 VS Code 主题
最近一直在 VSCode 上刷 LeetCode 题目,写久了感觉界面有点沉闷,决定找一个酷炫的主题来醒目一下. 结果在 GitHub 上找到一个令人纸醉金迷的 VSCode 主题,GitHubDai ...
- zblog主题,zblog主题制作,zblog网站模板主题
zblog主题,是针对自媒体博客设计,采用两栏布局.响应式结构的zblog主题,整站设计精美.内容丰富.代码标准简洁.HTML标签分布合理.兼容性强,在浏览器等当下PC端和移动端主流浏览器中都具有良好 ...
最新文章
- 2019年值得关注的九个AI创业风口
- android:src= @drawable/login_logo,android实现登录,Login姿势对不对?
- weblogic部署ssh2应用出现异常
- Python入门学习---第一天
- 10种轻量级人脸检测算法大PK
- 基本数据类型与String之间的转换
- 如何修改7 服务器配置,centos7修改服务器配置
- 发布一个Easy Linux 版本,正式命名为EzLinux
- C#、.Net经典面试题集锦(一)
- jsmin php,使用JSMin.php缩小Javascript
- python把print写入文件_Python中用print方法向文件中写入内容
- android通知栏应用程序更新,Android App自动更新之通知栏下载
- python︱写markdown一样写网页,代码快速生成web工具:streamlit lay-out布局(四)
- vue更新路由router-view复用组件内容不刷新
- monkey命令的使用
- 怎样去掉gif动图水印?在线编辑gif图片技巧
- 共享停车位的市场现状,共享车位盘活城市闲置车位!
- Unity 年度总结:一款游戏的从0到1
- JAVA版opencv透明,opencv 替换纯色背景为透明背景
- Android 点击按钮带有震动效果,使用Vibrator