vscode 护眼主题 界面UI配色 语法配色
2024-04-09 05:14:20
已发布vscode商店，搜索安装即可
项目地址
https://gitee.com/lwleen/vs
VScode很好用.
vs codium 是它的开源版本, 几乎没有差别.
下载地址
https://code.visualstudio.com/
https://mirrors.tuna.tsinghua.edu.cn/github-release/VSCodium/vscodium/
开启中文很简单, 如图
一 , 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文件夹
- package.json 是插件信息, VScode 通过它识别插件是干什么用的.
- README.md 是详细的插件介绍信息, 可有可无
- ui-color.json 是界面UI配色, 都在这里
- 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": "",}},]}
vscode 护眼主题 界面UI配色 语法配色相关推荐
- Goland护眼主题配置
一.说明 Goland编辑器自定义护眼主题和高亮配色. 在 Monocai Color Theme 主题基础上重新修改后的主题配置.为了保护眼睛,采用暗黑风格,语法高亮和配色采用中高的对比度. 二.修 ...
- 完美VS2010黑色主题最舒服的护眼主题(包含所需插件)
效果图: 工具下载地址:https://download.csdn.net/download/wangwb0820/10758163 在此分享一下自己调出来的最舒服的主VS2010黑色护眼主题,包含v ...
- Sublime Text 3 、WebStorm配置护眼主题（浅绿色）
本文所用软件版本Sublime Text 3(Build 3143).WebStorm 2017.2.4(Build #WS-172.4155.35),其他版本软件配置过程可能不一样,请知悉! 1.S ...
- idea 设置背景图片、护眼主题
idea 设置背景图片.护眼主题 Ctrl + Alt + S 调出idea的 Settings设置 设置背景色 主题同样在Settings 护眼主题加背景图片如下效果,背景图片透明度可自己调节 护眼 ...
- theme vscode 护眼_vs code 护眼设置
关于 本人是一名在校的计算机的大学生.目前是大三,由于这一年的课程比较少,没课的时间都在宿舍写代码. 常用的IDE和编辑器都是以黑色为主色调的主题,就感觉还挺酷的.像是周末基本上10个小时对着电脑屏幕 ...
- vscode设置背景护眼主题颜色、字体颜色不影响其他主题的颜色
解决问题的初衷,是本人在打代码疲劳的时候想换个主题颜色,平时习惯用深色,用浅色的时候想把背景调成护眼绿,没找到合适的插件,在网上找到更改背景色的代码,用着挺不错. 但是在更改回我的默认深色主题时,背景 ...
- theme vscode 护眼_VS code 豆沙绿护眼主题
一.下载亮色主题Atom One Light 二.找到settings.JSON,粘贴JSON 快捷键输入 Ctrl+Shift+p ,输入settings,选择open settings (J ...
- Yilia清新护眼主题
================ 以后文章在自己的博客更新,欢迎来踩. 简约优雅的个人博客,访问 https://anyway521.gitee.io// 查看效果.(点击展开大图) -------- ...
- vscode护眼绿+python环境搭建
0 环境 系统:win10 编辑器: vscode python相关:python+anaconda安装好 1 护眼绿 1 安装Atom One Light Theme插件(重启vscode) 2 s ...
最新文章
- linux撤销以硬件时钟作为UTC,linux时钟基本概念、CST与UTC、以及NTP简单设置
- navbar build by Bootstrap3.x + RubyOnRails +Haml
- 802.1x认证协议的应用
- 【解决方案】npm安装vue超时(ERR! errno ETIMEDOUT)
- cocos2D（九）---- CCAction
- (chap6 Http首部) 报文首部
- [Python图像处理] 七.图像阈值化处理及算法对比
- C# winform 多线程中创建等待窗体
- 文件桌面跟计算机同步删除吗,电脑里桌面文件被不慎覆盖了如何恢？
- Android基础教程之-------Android中两种设置全屏的方法!!!
- windows7家庭版,专业版,旗舰版,企业版版本区别
- pr控制C语言程序,PR控制（含代码）
- 能将PDF转成PPT图片文字的转换器
- 芯准TSN系统的测试与验证（1）——测试环境配置
- 通过AWS云平台 构建云上勒索病毒防护体系，轻松保护数据完整性
- 爬取京东图书价格信息分析
- HTML登陆界面编程代码
- android原生农场壁纸,Android 6.0高清壁纸下载-Android 6.0原生壁纸高清免费打包下载-东坡下载...
- PID控制器——MATLAB/Simulink仿真以及性能比较与分析
- 快速确定针式打印机故障部位方法