vscode更换主题的插件_VScode 插件开发(三)主题

本文介绍了如何使用 Yeoman 创建并自定义 VSCode 主题,包括创建暗色和亮色主题,通过复制已有主题的颜色配置进行修改,以及调试和个性化颜色设置的过程。作者强调了自己制作主题以适应个人视觉舒适度的重要性。
摘要由CSDN通过智能技术生成

咱们上回书说道,安装完基础环境,我们要来玩自己的主题了

1. 创建一个主题项目

$ yo code

选中 New Color Theme

afd17ac3ffb4dea8eee74497a4a5e7e9.png

接下来照图中所选,完成项目创建(简单英语不做解释)

d1a7a843a108fb72795cf831ffb742fa.png

打开项目如图

4e636819137c04431decd60c5a3148b1.png

2. 配置文件

2.1 themes

这个文件夹包含主题配置文件,可以新建两个,一个暗色主题,一个亮色主题

7548686469f16b9f0a5715278d82d4f8.png

如图所示

{

"name": "test theme", // 姓名

"type": "dark", // 类型(暗色还是亮色)

"colors": { // 配置外框主题,导航栏,文件栏,等

"editor.background": "#263238",

"editor.foreground": "#eeffff",

"activityBarBadge.background": "#007acc",

"sideBarTitle.foreground": "#bbbbbb"

},

"tokenColors": [ // 配置代码的颜色

{

"name": "Comment", // 随便起名,自己知道什么意思就好

"scope": [ // 这个颜色要应用于哪种类型的代码上

"comment",

"punctuation.definition.comment"

],

"settings": { // 配置颜色,斜体,粗体等

"fontStyle": "italic",

"foreground": "#546E7A"

}

}

]

}

以上就是一个主题的配置,这篇文章就说完了~~~

那不可能的,这么两句东西,谁能知道怎么写,我自己也不知道,哈哈哈,所以用了偷懒的方法

偷懒步骤 1、下载一个主题插件

偷懒步骤 2、找到这个主题插件,然后复制其中颜色部分代码

偷懒步骤 3、按照字段找颜色替换

ps: mac 中主题文件在 users -> .vscode -> extensions 中

2.2 修改颜色

经过一番研究(取巧、偷懒、抄袭),将字段一个个调整为自己喜欢的颜色

5932b278cf5a6e33315efe19605d23a2.png

5896f57c2ad7ce9128351fae65f09815.png

ps:调试小技巧 cmd + shift + p 找到命令

fca8ca67263c3329ad8136ab862f2b81.png

此时我们鼠标点到任何一个字段上面,就会有提示,这样我们修改起颜色就很方便

279736f19a242475caab16b5f4e8287b.png

点击 vscode 小虫子就可以直接调试 ~~

推销主题

经过三天的研究颜色问题,怎么搭配让我的眼睛舒服,毕竟我不想因为代码让眼睛配上一个500度的眼镜

所以自己制作了主题

4a4f09d2eb809f2151a79c41ce23ab33.png

代码看起来,简直不要太舒服!

9c0984ede7b1d3933ed07943039b00fa.png

25057eb90e7746f8ea6a1818e356e2ba.png

清晰,舒服,大气!!!

但是你们有时间最好还是弄自己的吧,自己做的才舒服。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值