VScode 插件开发(三)主题

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

1. 创建一个主题项目

$ yo code

选中 New Color Theme
VScode 插件开发(三)主题_第1张图片

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

VScode 插件开发(三)主题_第2张图片

打开项目如图

VScode 插件开发(三)主题_第3张图片

2. 配置文件

2.1 themes

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

VScode 插件开发(三)主题_第4张图片

如图所示

{
    "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 修改颜色

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

VScode 插件开发(三)主题_第5张图片

VScode 插件开发(三)主题_第6张图片

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

VScode 插件开发(三)主题_第7张图片

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

VScode 插件开发(三)主题_第8张图片

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

推销主题

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

所以自己制作了主题

VScode 插件开发(三)主题_第9张图片

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

VScode 插件开发(三)主题_第10张图片

VScode 插件开发(三)主题_第11张图片

清晰,舒服,大气!!!

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

VScode 插件开发(一)絮叨

VScode 插件开发(二)package.json详解

VScode 插件开发(三)主题

VScode 插件开发(四)代码段

VScode 插件开发(五)插件包

VScode 插件开发(六)打包发布

你可能感兴趣的:(插件)