VScode 自定义主题 护眼主题 界面UI配色 语法配色
2020-11-08 本文已影响0人
一切时空过去未来
已上架 vscode 商店，搜索安装即可
项目地址
VScode很好用.
vs codium 是它的开源版本, 几乎没有差别.
下载地址
https://code.visualstudio.com/
https://mirrors.tuna.tsinghua.edu.cn/github-release/VSCodium/vscodium/
开启中文很简单, 如图
QQ截图20201107191610.png
一 , vscode 配置
配置文件 setting.json 所在位置C:\Users\用户名\AppData\Roaming\Code\User\settings.json
这里的设置也很重要, 自定义字体, 各个功能都在这里
setting.json
{
"workbench.colorTheme": "lwl-theme",
"workbench.startupEditor": "newUntitledFile",
"editor.fontSize": 15,
"editor.fontFamily": "Hack",
//启用所在行,行号高亮
"editor.renderLineHighlight": "all",
}
二, 自定义主题
如图, 我的自定义主题, 仅供参考.
在路径 C:\Users\用户名\.vscode\extensions\ 下创建 mytheme文件夹
[图片上传失败...(image-d0cfbc-1604747978371)]
1. package.json 是插件信息, VScode 通过它识别插件是干什么用的.
2. README.md 是详细的插件介绍信息, 可有可无
3. ui-color.json 是界面UI配色, 都在这里
4. my-syntax-color.json 是语法配色
详细内容
1, package.json 插件信息
{
"name": "lwl-theme",
"displayName": "我的主题",
"description": "自定义界面UI配色，用了默认语法配色，在其基础上增加自己的语法配色。",
"categories":["Themes"],
"version": "0.0.1",
"publisher": "lwl",
"engines":{"vscode":"*"},
"contributes": {
"themes": [
{
"id":"lwl-theme",
"label": "我的主题",
"uiTheme": "vs",
"path": "./ui-color.json"
}
]
}
}
2, ui-color.json 界面UI配色
{
"$schema": "vscode://schemas/color-theme",
"name": "界面UI的配色",
"type": "light",
"include": "./my-syntax-color.json", //语法配色
//启动行号颜色...配置文件C:\Users\lwlee\AppData\Roaming\Code\User\settings.json
// --->>> "editor.renderLineHighlight": "all"
//窗体色彩配置
// 窗体颜色 8dc5ab(菜单) 009e0d(强烈分割线) dddddd(窗体)
// 编辑区色 d0d4d0(背景) 96e285(匹配词) d8d8d8(高亮行) 999999(行号)
// 强烈颜色 e254c3(提醒) fff453(括号) ee0000(错误)
//
"colors":{
//1 悬浮控件背景=============================================
"menu.background":"#dddddd", //悬浮菜单背景色 ------菜单栏
"menu.foreground":"#000000", //悬浮菜单前景色
"editorHoverWidget.background": "#dddddd", //悬浮控件背景 ----编辑区
"editorSuggestWidget.background": "#dddddd",
"editorHoverWidget.foreground": "#000000",
"editorHoverWidget.border": "#009e0d", //悬浮控件边框
"editorSuggestWidget.border": "#009e0d", //悬浮建议边框
"list.highlightForeground": "#e254c3", // 匹配字体颜色 ---编辑区，输入提示
//配置弹出的下拉菜单 和 左侧资源管理器栏里菜单
"list.activeSelectionBackground":"#8dc5ab", // 左侧 资源管理器栏里
"list.activeSelectionForeground": "#000000",
"list.inactiveSelectionBackground": "#8dc5ab69", //未激活菜单背景
"list.inactiveSelectionForeground": "#000000",
"list.errorForeground": "#ee0000", // 出现错误
"list.hoverBackground": "#8dc5ab42", //鼠标移动背景色 ----面包屑栏下拉菜单
"list.focusBackground": "#8dc5ab69", //聚焦背景色
"focusBorder": "#8dc5ab98", // 窗口聚焦时边框
"input.border": "#009e0d", //输入窗口边框
"input.background": "#dddddd",//输入窗口背景
//2 全局边框 ===============================================
"window.activeBorder": "#009e0d", //全局边框-------------
//3 菜单栏 标签栏 面包屑栏 ======================================
"titleBar.activeForeground": "#000000",
"titleBar.activeBackground": "#8dc5ab", //最顶菜单背景
"titleBar.inactiveBackground": "#8dc5ab",
"tab.hoverBorder": "#009e0d",
"tab.hoverBackground": "#8dc5ab62", // 标签鼠标悬停时颜色
"tab.hoverForeground": "#000000",
"tab.inactiveBackground":"#dddddd", // 非活动的标签颜色
"tab.inactiveForeground": "#000000",
"tab.activeBackground":"#8dc5ab62", //活动标签背景色
"tab.activeForeground": "#000000", //激活的 字体 前景色
"tab.border": "#8dc5ab", // 标签两边竖线---------
"editorGroupHeader.tabsBackground": "#dddddd", // 非活动右侧便签颜色
"breadcrumb.foreground":"#000000", //面包屑栏
"breadcrumbPicker.background":"#dddddd", //下拉背景色
"editorGroupHeader.border": "#009e0d", //标签栏和编辑区分割线 分割线-------
"scrollbar.shadow": "#8dc5ab", // 上面分割线的阴影
"editorGroup.dropBackground": "#8dc5ab41", //拖动界面 分屏颜色多屏
//4 编辑区=================================================
"editor.foreground":"#000000", //前景色
"editor.background":"#d0d4d0", //背景色
"editor.lineHighlightBackground": "#d9d9d9", //高亮行
"editor.lineHighlightBorder": "#d8d8d8", //高亮行边框
"editor.selectionBackground": "#96e285", //选中词颜色 ++++@ @ @++++
"editor.selectionHighlightBackground": "#fff453b6", //相同匹配词的颜色
"editor.inactiveSelectionBackground":"#fff453b6", //窗口失去焦点，选中的颜色
"editorCursor.foreground": "#000000", //光标颜色
"editor.findMatchBackground": "#96e285", //当前选中的搜索词的颜色
"editor.findMatchHighlightBackground": "#fff453", //相同匹配词的颜色
"editorBracketMatch.background":"#fff453", //括号背景
//行号所在区域
"editorLineNumber.foreground": "#999999b4", //行号颜色
"editorLineNumber.activeForeground": "#000000", //活动行号突出显示
"editorGutter.background": "#dddddd", //行号背景
"editorGutter.modifiedBackground": "#8dc5ab", //行号右边的 内容标记
"editorIndentGuide.background":"#99999960", //缩进线颜色非激活------
"editorIndentGuide.activeBackground":"#999999", //当前激活的缩进线------
"debugIcon.breakpointForeground":"#e254c3", //断点标记
"editorGutter.foldingControlForeground": "#e254c3", // 折叠标记
"editor.foldBackground": "#e254c333", //折叠后的背景
"diffEditor.border": "#009e0d", // 多个编辑器的分割线 ----------
//5 最左侧栏 活动栏 侧边栏 资源管理器栏================================
"activityBar.background": "#dddddd", //最左活动栏
"activityBar.foreground": "#009e0d", //最左活动栏图标颜色
"activityBarBadge.background":"#e254c3", //最左活动栏 通知标记 颜色
"activityBarBadge.foreground": "#ffffff",
"activityBar.border": "#99999960", //边框 分割线--------------
"sideBar.background": "#dddddd", //最左侧边栏 展开
"sideBar.foreground": "#000000", // 侧边栏 字体颜色
"sideBar.border": "#99999960", //侧边栏 边框分割线---------------
"sideBarTitle.foreground": "#000000", //侧边栏 标题颜色
"badge.background": "#e254c3", //标记未保存文件
"badge.foreground":"#ffffff",
//6 右面缩略图===============================================
"minimap.background": "#dddddd", //缩略图背景
"minimapSlider.activeBackground": "#8dc5ab83", //点击激活滑块颜色
"minimapSlider.hoverBackground": "#8dc5ab83",
"minimapSlider.background": "#8dc5ab83",
"minimap.selectionHighlight": "#ff0000", //当前行标记
//7 最右面滑动块==============================================
"scrollbarSlider.background": "#8dc5ab00", //滑块颜色
"scrollbarSlider.hoverBackground": "#8dc5abdc",
"scrollbarSlider.activeBackground": "#8dc5abdc", //点击滑块激活颜色
//8 最右滑动块底下的区域
"editorOverviewRuler.selectionHighlightForeground": "#ff0000", //选中词
"editorOverviewRuler.findMatchForeground": "#ff0000", //搜索词
"editorOverviewRuler.currentContentForeground": "#ff0000",
//9 最底部栏 状态栏=======================================
"statusBar.noFolderBackground" : "#8dc5ab", //单文件状态栏
"statusBar.background": "#8dc5ab", //最底状态栏颜色
"statusBar.foreground": "#000000", //最底状态栏前景颜色
"statusBar.border": "#8dc5ab", //底部状态栏分割线--------
"panel.background": "#dddddd", //最底部控制台
"panel.border": "#009e0d", //控制台边框
"panelTitle.activeBorder": "#e254c3", //标题下划线颜色
},
}
3, my-syntax-color.json 语法配色
{
"$schema": "vscode://schemas/color-theme",
"name": "默认的语法色彩",
"semanticHighlighting":true,
"semanticTokenColors": {
"newOperator": "#0000ff",
"stringLiteral": "#a31515",
"customLiteral": "#000000",
"numberLiteral": "#098658",
},
//下面都是语法色彩配置
//一个最小化的主题只会定义 11 个根组中的 10 个样式（其中 meta 是不会有视觉样式的)
"tokenColors": [
//1、关键字（当它无法被归并到别的组时使用）。
{
"scope": [
"keyword.control", //通常是流程控制关键字，如 continue、while、return 等。
"keyword.control.conditional",
"keyword.control.import",
"punctuation.definition.keyword", // 带符号的关键字, such as the @ symbol in CSS, add the following scope to the symbols:
//运算符通常都是符号，根据运算符的类型引用特定的变体
"keyword.operator", // 文本（如 or）或者字符类型的操作符。
"keyword.operator.assignment",
"keyword.operator.arithmetic",
"keyword.operator.bitwise",
"keyword.operator.logical",
"keyword.operator.word", //操作者是一个字(and or not)
"keyword.other", //其它关键字
],
"settings": {
"foreground": "#0000ff", //关键字
"fontStyle": "",
}
},
//2、 storage：与存储相关的内容。
{
"scope": [
"storage.type", //类型，如 class、function、int、var 等。
"storage.modifier", //存储相关的修饰符，static, inline, const, public and private.
"storage.type.function", // func, function and def
//Keywords for classes, structs, interfaces
"storage.type.class",
"storage.type.struct",
"storage.type.enum",
"storage.type.union",
"storage.type.trait",
"storage.type.interface",
"storage.type.impl ",
"storage.type keyword.declaration.type",
],
"settings": {
"foreground": "#00a2ff", //存储 类型的关键字
"fontStyle": "",
}
},
//3、support：框架或者库提供的内容。 比如内置函数
{
"scope": [
"support.function", //框架或者库提供的函数，如 Objective-C 中的 NSLog 就应该是
"support.constant", //框架或者库提供的常量。
"support.module",
"support.class", // 框架或者库提供的类。
"support.type", //框架或者库提供的类型，有可能只在 C 系语言中使用，如 typedef 等。大多数其它语言都会被认为是类。
],
"settings": {
"foreground": "#3f6be4", // 框架提供的 内置函数
"fontStyle": "bold",
}
},
// 4 、entity 实体，指文档中比较大坨的部分，如章节、类、函数或者标记。
// 我们并不讲所有的实体都归于 entity.*，有些会归于 meta.*。
{
"scope": [
//"entity.name", //用于命名一个大实体。
"entity.name.class",
"entity.name.struct",
"entity.name.enum",
"entity.name.union",
"entity.name.trait",
"entity.name.interface",
"entity.name.impl",
"entity.name.type", //类型定义或者类。
"entity.name.class.ford-decl", //在C和c++中使用
"entity.other.inherited-class", //超类/基类名称
// "entity.name.function", //函数实体
"entity.name.function.constructor",
"entity.name.function.destructor",
"entity.name.namespace", //命名空间，包和模块
"entity.name.constant", //常数
"entity.name.label", //类似goto的构造的标签
"entity.name.tag", // HTML and XML tags标记。
"entity.name.section", // 章节。 标记语言(如markdown)的标题名称
"entity.other.attribute-name", // HTML, CSS and XML
],
"settings": {
"foreground": "#a0008b", //只关于名字的 配色
"fontStyle": "",
}
},
//5、meta元作用域用于范围更大的代码或标记部分，通常包含多个更具体的范围数据结构的完整内容
// These are not intended to be styled by a color scheme, but used by preferences and plugins.
//如声明函数的整行将是 meta.function，子集将是 storage.type、entity.name.function、variable.parameter 等，并且只有后者才会被样式化。
{
"scope": [
"meta.class",
"meta.struct",
"meta.enum",
"meta.union",
"meta.trait",
"meta.interface",
"meta.impl",
"meta.type",
"meta.function", // 函数定义与声明的参数以及括号；宏定义代码段的参数及括号
"meta.function.parameters",
"meta.function.return-type",
"meta.namespace",
"meta.preprocessor", // 预处理“#if”等的括号；宏定义的参数括号及代码段
"meta.annotation",
"meta.annotation.identifier",
"meta.annotation.parameters",
"punctuation.definition.annotation",
"meta.path",
"meta.function-call", //函数名称(包括完整路径)和所有参数
"meta.block", //用{}描述的代码段使用以下范围，在{}内的字符使用另外的punctuation范围
"punctuation.section.block.begin",
"punctuation.section.block.end",
"meta.braces",
"punctuation.section.braces.begin", // { and }
"punctuation.section.braces.end",
"meta.group",
"punctuation.section.group.begin", //()
"punctuation.section.group.end",
"meta.parens",
"punctuation.section.parens.begin",
"punctuation.section.parens.end",
"meta.brackets",
"punctuation.section.brackets.begin", //[ and ]
"punctuation.section.brackets.end",
"meta.generic",
"punctuation.definition.generic.begin", // < and >
"punctuation.definition.generic.end",
"meta.tag", //HTML and XML tags
"meta.paragraph", //标记语言的段落 markup
],
"settings": {
"foreground": "",
"fontStyle": "",
}
},
{
"scope": [
"meta.function",
"meta.function-call",
],
"settings": {
"foreground": "#a0008b",
"fontStyle": "",
}
},
{
"scope": [
"meta.function.parameters",
"meta.function.return-type",
],
"settings": {
"foreground": "#000000",
"fontStyle": "",
}
},
// 6、函数 变量 参数 variable
{
"scope": [
"variable.other", //其它变量，如 $some_variables。
"variable.other.readwrite", //let、var声明的变量的颜色
"punctuation.definition.variable", //the $ in PHP and Shell.
"variable.other.constant", //const声明的不可变变量的颜色
"variable.language", //语言保留变量，如 this、super、self 等。this、super等
"variable.parameter", //函数参数
"variable.other.member", //类或其他数据结构的字段，属性，成员
"variable.function", //函数和方法名称的作用域，但仅限于调用时
"variable.annotation", //作为数值一部分的标识符中的最终标签
"punctuation.definition.annotation"
],
"settings": {
"foreground": "#000000", //函数参数
"fontStyle": "italic",
}
},
// 7、constant 各种形式的常数
{
"scope":[
"constant.numeric", //数字 e.g. 42, 1.3f, 0x4AB1U.
"constant.numeric.integer",
"constant.numeric.integer.binary",
"constant.numeric.integer.octal",
"constant.numeric.integer.decimal",
"constant.numeric.integer.hexadecimal",
"constant.numeric.integer.other",
"constant.numeric.float",
"constant.numeric.float.binary",
"constant.numeric.float.octal",
"constant.numeric.float.decimal",
"constant.numeric.float.hexadecimal",
"constant.numeric.float.other",
"constant.numeric.complex",
"constant.numeric.complex.real",
"constant.numeric.complex.imaginary",
"constant.languag", //true/false/null
"constant.character.escape", //转义字符如\n和\x20 //匹配字符，e.g. <, \e, \031.
"constant.other.placeholder", //格式化占位符 %s
"constant.other", //其他常量，如css中的颜色
],
"settings": {
"foreground": "#df1010", //数字
"fontStyle": "",
}
},
//8 、字符串
{
"scope": [
"string.quoted", //带引号的字符串
"string.quoted.single", //单引号字符串，如 'foo'。
"string.quoted.double", //双引号字符串，如 "foo"。
"string.quoted.triple", //三引号字符串，如 """Python"""。
"string.quoted.other", // 其它字符串，如 $'shell'、%s{...}。
"meta.string",
"punctuation.definition.string.begin",
"punctuation.definition.string.end",
"string.quoted.unquoted", //如未加引号 here-docs 和 here-strings。
"string.quoted.regexp", //正则表达式。
"meta.interpolated", //需要被计算的字符串，如 反引号date反引号、$(pwd)。
"punctuation.section.interpolation.begin",
"punctuation.section.interpolation.end",
"source.language-suffix.embedded",
],
"settings": {
"foreground": "#a31515", //字符串
"fontStyle": "",
}
},
// 9、comment 注释
{
"scope": [
"comment.line",
"comment.block", //block：多行注释
"comment.block.documentation", //多行注释 / … / and <!-- … -->
"punctuation.definition.comment",
"meta.toc-list",
],
"settings": {
"foreground": "#005500b7", //注释
"fontStyle": "",
//斜体 "fontStyle": "italic",
//斜体下划线 "fontStyle": "italic underline",
//斜体粗体下划线 "fontStyle": "italic bold underline",
}
},
//10、 punctuation 括号之类
{
"scope": [
// "punctuation.separator", //,和:
// "punctuation.terminator", //;和其他语句终止符 分号（代码终止符）
// "punctuation.separator.continuation", //行继续字符
// "punctuation.accessor", //.
],
"settings": {
"foreground": "", // 符号 ， （） 等 颜色
"fontStyle": "",
}
},
//11 invalid：非法内容
{
"scope": [
"invalid.illegal", //非法，如 HTML 中的 & 等（非实体 / tag 中的部分）。
"invalid.deprecated", //过时内容，如使用了不推荐使用的 API 函数。
],
"settings": {
"foreground": "#e93636"
}
},
// 12、markup 标记作用域用于内容，而不是代码(包括Markdown和Textile等语法)
{
"scope": [
"markup.heading", //章节头。（可选）为接下去的元素提供标题级别，如 HTML 中的
"markup.list.numbered", // 有序列表项。
"markup.list.unnumbered", // 无序列表项。
"markup.bold", //加粗文本。
"markup.italic", //斜体文本。
"markup.underline", //带下划线
"markup.inserted", //插入
"markup.deleted", //删除
"markup.underline.link", // 用于超链接，为了方便起见，它是从 markup.underline 派生的，这的话即使没有专门针对 markup.underline.link 的主题规则，也能继承下划线样式。
"markup.quote", //逐字文本，如代码项。通常对于 markup.raw 是禁用拼写检查的。
"markup.raw.inline", //逐字记录的文本
"markup.raw.block",
"markup.other", //其它标记结构。
],
"settings": {
"foreground": "",
"fontStyle": "",
}
},
{
"scope": "markup.underline",
"settings": {
"fontStyle": "underline"
}
},
{
"scope": "markup.bold",
"settings": {
"fontStyle": "bold",
"foreground": "#000080"
}
},
{
"scope": "markup.heading",
"settings": {
"fontStyle": "bold",
"foreground": "#800000"
}
},
{
"scope": "markup.italic",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "markup.inserted",
"settings": {
"foreground": "#098658"
}
},
{
"scope": "markup.deleted",
"settings": {
"foreground": "#a31515"
}
},
{
"scope": "markup.changed",
"settings": {
"foreground": "#0451a5"
}
},
{
"scope": "markup.inline.raw",
"settings": {
"foreground": "#800000"
}
},
{
"name": "brackets of XML/HTML tags",
"scope": "punctuation.definition.tag",
"settings": {
"foreground": "#800000"
}
},
// 13、source 应用于整个源代码文件
{
"scope": [
"source",
],
"settings": {
"foreground": "",
"fontStyle": "",
}
},
//14、text
{
"name":"text",
"scope": [
"text.html", //html
"text.xml", //xml
],
"settings": {
"foreground": "",
"fontStyle": "",
}
},
]
}
