【vscode】vscode主题样式颜色选择

前言

• 最近比较忙，水一篇vscode主题样式。
• vscode一般默认是黑色底色，关键字或者变量一般偏蓝绿，当满屏幕变量时眼睛看着会非常难受。
• 之前用过hbuilder，虽然编辑器不如vscode，但是配色还算不错，我又在此基础上修改了下。
• scope文档：https://www.sublimetext.com/docs/scope_naming.html#meta
• 部分内容需要查找scope改成对应想要的颜色。
• fira字体下载：https://github.com/tonsky/FiraCode/releases

配置

• 尽量变量之类避免刺眼的颜色，之前翻代码时，每个变量都是一长串，一屏幕下来满屏刺眼看着太难受了。

"workbench.colorTheme": "Default Light+",
	//代码注释部分颜色
	"editor.tokenColorCustomizations": {
    
    
		"comments": "#95a3ab",
		"keywords": "#6d4d41",
		"variables": "#237066",
		"textMateRules": [
			{
    
    
				"scope": "keyword.control", //if ,else, try 等控制符
				"settings": {
    
    
					"foreground": "#C586C0"
				}
			},
			{
    
    
				"scope": "constant.language", //boolean null
				"settings": {
    
    
					"foreground": "#1c3f74"
				}
			},
			{
    
    
				"scope": "variable.language", //this
				"settings": {
    
    
					"foreground": "#1c3f74"
				}
			},
			{
    
    
				"scope": "punctuation.definition.variable",
				"settings": {
    
    
					"foreground": "#1c3f74"
				}
			},
			{
    
    
				"scope": "keyword.operator", //算数符
				"settings": {
    
    
					"foreground": "#f07d3b"
				}
			},
			{
    
    
				"scope": "storage.modifier", //修饰语
				"settings": {
    
    
					"foreground": "#f09090"
				}
			},
			{
    
    
				"scope": "entity.name.type.class", //类名
				"settings": {
    
    
					"foreground": "#c0526a"
				}
			},
			{
    
    
				"scope": "storage.type.primitive.java", //int 
				"settings": {
    
    
					"foreground": "#c0526a"
				}
			},
			{
    
    
				"scope": "entity.name.type.interface", //接口
				"settings": {
    
    
					"foreground": "#c0526a"
				}
			},
			{
    
    
				"scope": "entity.name.namespace", //导入部分
				"settings": {
    
    
					"foreground": "#74817c"
				}
			},
			{
    
    
				"scope": "entity.name.tag", //html标签
				"settings": {
    
    
					"foreground": "#d35c5c"
				}
			}
		]
	},
	"workbench.colorCustomizations": {
    
    
		"editorGroupHeader.tabsBackground": "#FFFAE8", // 标题栏未使用的地方
		"editorLineNumber.foreground": "#9F9371", //代码行号颜色
		"editor.lineHighlightBackground": "#E8DFC4", //代码选中高亮颜色
		"editor.selectionBackground": "#BCD68D",
		"editor.background": "#FFFAE8",
		"editorIndentGuide.background": "#cecdc2", //代码对齐线颜色
		//标题栏颜色设置
		"titleBar.activeBackground": "#d8ca9e",
		"titleBar.inactiveBackground": "#fffef9", //失去焦点时titlebar颜色
		//活动栏颜色
		//"activityBar.background": "#FFFAE8",          //设置这个颜色图标显示不清楚
		"activityBar.activeBackground": "#ece4c8", //打开菜单的颜色
		"activityBar.background": "#d8ca9e", // 背景色
		"activityBar.foreground": "#000000",
		//选项卡颜色设置
		"tab.activeModifiedBorder": "#41A863",
		"tab.hoverBackground": "#daeace",
		"tab.border": "#fffae8",
		"tab.activeBackground": "#daeace",
		"tab.activeForeground": "#AB7E05",
		"tab.inactiveBackground": "#fffae8",
		"tab.inactiveForeground": "#41A863",
		//侧边栏颜色设置
		"sideBarSectionHeader.background": "#FFFAE8",
		"sideBar.background": "#FFFAE8",
		"sideBarSectionHeader.foreground": "#AB7E05",
		"sideBar.border": "#d8ca9e",
		"sideBar.foreground": "#46433c",
		"sideBarTitle.foreground": "#46433c",
		//底部状态栏颜色设置
		"statusBar.background": "#AB7E05",
		//滚动条颜色
		"scrollbarSlider.background": "#cfb56a",
		"scrollbarSlider.hoverBackground": "#cfb56a",
		"scrollbarSlider.activeBackground": "#cfb56a",
		//终端窗口面板颜色设置
		"panel.background": "#fffcf3",
		"panel.border": "#d8ca9e",
		//弹出小窗口：选项设置提示窗口，源代码补全窗口
		"editorWidget.background": "#daeace", // 弹出小窗口的背景
		"editorWidget.foreground": "#46433c",
		"editorSuggestWidget.selectedBackground": "#e8dfc4", //代码提示选中行高亮
		"list.hoverBackground": "#e8dfc4", // 鼠标所在行的颜色
		"editorWidget.border": "#BCD68D", // 弹出小窗口的边框
		"list.activeSelectionBackground": "#41A863", //侧边栏选中高亮
		"list.inactiveSelectionBackground": "#d8ca9e" //侧边栏选中未获得焦点颜色
	},

	"editor.fontSize": 16,
	"editor.lineHeight": 22,
	"editor.fontFamily": "Fira Code",
	"editor.fontLigatures": true,