VSCode颜色主题自定义

VSCode颜色主题自定义

进入vscode的设置页面，打开setting.json文件，可以进行用户自定义配置

• 注:vscode版本1.51.0，操作系统win10>

自定义界面ui配色

//界面ui的颜色在该参数下编辑"workbench.colorCustomizations":{}

• 配置文件内的设置会优先生效>

自定义编辑器内代码颜色

//语法高亮颜色在该参数下编辑"editor.tokenColorCustomizations":{}

• 1.数据类型匹配> 可以直接通过基本的数据类型关键字改变编辑器内代码颜色>

• 2.文本内容匹配> *为了方便更精确的改变编辑器内的语法高亮,vscode可以通过"TM"规则的文本作用域来自定义一些代码段的颜色*

• 如何查看作用域:- > 1.按快捷键F1或者组合键ctrl+shift+p打开命令输入框，输入关键字“scopes”，找到并选择“开发人员：检查编辑器标记和作用域”选项；- > 2.点击代码中想要改变颜色的代码段，即可显示关于该代码段的说明和作用域，然后将其复制并粘贴到setting.json文件里的"scope"字段下，即可。> *可以看到一个代码段的作用域可能有多个，它们分别代表着不同的作用范围（作用范围由小到大自上而下排列，也就是说，最上面的一条代表着范围最小最精确的作用域）。> *参考链接：https://geek-docs.com/vscode/vscode-tutorials/vscode-modify-editor-color-matching.html

• 

控制台内容自定义配色

控制台（终端）内的文字颜色和打印内容的颜色vscode好像不能直接从settings.json文件里设置，
不过只要终端能够解释ANSI转义序列，就能够使用ANSI转义序列输出颜色
*（具体内容可以参考这里：https://www.cnblogs.com/opangle/p/4082692.html）

配置示例

以下是我的settings.json文件的配置代码，以供参考。
（更完整的主题颜色配置说明，可以阅读vscode关于主题配色的官方说明文档。链接：https://www.cnblogs.com/opangle/p/4082692.html）

{"workbench.iconTheme":"vscode-icons","workbench.colorTheme":"Solarized Dark","editor.fontFamily":"Consolas, Small Fonts, Segoe MDL2 Assets, Lucida Console, Comic Sans MS, Calibri, 幼圆, Consolas, monospace, 'Courier New'","window.zoomLevel":0,// "editor.codeActionsOnSave": null,//终端"terminal.integrated.cursorBlinking":true,//控制终端光标是否闪烁"terminal.integrated.lineHeight":1.1,//终端的行高// "terminal.integrated.letterSpacing": 0.1,// "terminal.integrated.fontSize": 11, //字体大小设置// "terminal.integrated.fontFamily": "Small Fonts, Lucida Console", //字体设置// "terminal.integrated.shell.linux": "/bin/zsh",// "terminal.integrated.shell.windows": null,//终端在 Windows 上使用的 shell 的路径//各个ui组件颜色设置"workbench.colorCustomizations":{//顶部菜单栏"titleBar.activeBackground":"#002C39",//窗口处于活动状态时顶部菜单栏背景色// "titleBar.activeForeground": "#ff0000",//窗口处于活动状态时顶部菜单栏前景色"titleBar.border":"#04799c",//顶部菜单栏边框颜色"titleBar.inactiveBackground":"#6c7679",//窗口处于非活动状态时顶部菜单栏背景色// "titleBar.inactiveForeground": "#ff0000",//窗口处于非活动状态时顶部菜单栏前景色//底部状态栏"statusBar.background":"#0e440e",// 底部状态栏#0e440e,#28556e,#00212B// "statusBar.noFolderBackground": "#000",//没有打开文件夹时状态栏的背景色#00212B"statusBar.debuggingBackground":"#038803",//调试程序时状态栏的背景色"statusBar.debuggingForeground":"#eafdfd",//#93a1a1调试程序时状态栏的字体色// "statusBar.border": "#c288c4",//状态栏分隔侧边栏和编辑器的边框颜色"statusBar.foreground":"#93A1A1",// "statusBarItem.remoteBackground": "#2AA19899",//#2AA19899// "statusBarItem.prominentBackground": "#003847",//#003847// "statusBarItem.prominentHoverBackground": "#f70505",//#003847// "debugToolBar.background": "#0a5329",//调试工具栏背景颜色#00212B// "debugExceptionWidget.background": "#8ebcca",//异常小组件背景颜色#00212B// "debugExceptionWidget.border": "#AB395B",//异常小组件边框颜色#AB395B//资源管理器// "sideBar.background": "#000",//资源管理器页面背景色// "sideBarSectionHeader.border": "#c48888",//侧边栏节标题的边框颜色// "sideBarSectionHeader.background": "#ff0000",//侧边栏节标题的背景颜色// "sideBar.foreground": "#0be8f0",//侧边栏文件名颜色// "activityBar.border": "#1c5532",//侧边栏边框分隔活动栏的边框颜色// "sideBar.border": "#8ac488",//侧边栏分隔编辑器的边框颜色// "sideBarTitle.foreground": "#c48888",//侧边栏标题前景色"sideBarSectionHeader.foreground":"#799ea3",//侧边栏节标题的前景色// "sideBarSectionHeader.background": "#000",//侧边栏节标题的背景颜色// "sideBar.dropBackground": "#ff0000",//侧边栏中的部分在拖放时的反馈颜色//资源管理器内文件列表"list.activeSelectionBackground":"#003440",//选中文件时的背景色#005a6f"list.inactiveSelectionBackground":"#003440",//选中文件非活动时时的背景色#003440"list.activeSelectionForeground":"#e7c70e",//选中文件时的前景色#dabb0d"list.inactiveSelectionForeground":"#e7c70e",//选中文件非活动时时的前景色#058637"list.hoverBackground":"#043a467a",//鼠标悬停文件上方时的背景色"list.hoverForeground":"#e7c60e91",//鼠标悬停文件上方时的前景色// "list.errorForeground": "#ff0000",//包含错误的列表项的前景颜色//终端控制台// "panel.background": "#164123",//控制台背景色"panel.border":"#04799ca4",//控制台与编辑器分割线颜色#04799c// "panelInput.border": "#ff0000",//调试控制台筛选器边框颜色// "panelTitle.activeBorder": "#fdfdfd",//活动面板标题的下边框颜色"panelTitle.activeForeground":"#faf8f8",//活动面板的标题颜色// "panelTitle.inactiveForeground": "#ff0000",//非活动面板的标题颜色// "terminal.background": "#181818",//终端的背景颜色// "terminal.foreground": "#50b962",//终端的前景颜色#26e045// "terminalCursor.background": "#D8D8D8",//终端光标的背景色// "terminalCursor.foreground": "#D8D8D8",//终端光标的前景色"terminal.ansiBlack":"#181818","terminal.ansiBlue":"#7CAFC2","terminal.ansiBrightBlack":"#585858","terminal.ansiBrightBlue":"#7CAFC2","terminal.ansiBrightCyan":"#86C1B9",//#86C1B9"terminal.ansiBrightGreen":"#A1B56C","terminal.ansiBrightMagenta":"#BA8BAF","terminal.ansiBrightRed":"#AB4642","terminal.ansiBrightWhite":"#F8F8F8",//#F8F8F8"terminal.ansiBrightYellow":"#caf50a",//终端输入“python”的颜色#F7CA88,#f5970a"terminal.ansiCyan":"#305352",//按F5时终端调试时的一串文字的颜色#86C1B9,#465c59"terminal.ansiGreen":"#A1B56C","terminal.ansiMagenta":"#BA8BAF","terminal.ansiRed":"#AB4642","terminal.ansiWhite":"#D8D8D8",//#D8D8D8"terminal.ansiYellow":"#F7CA88",//#F7CA88// "terminal.selectionBackground": "#ff0000",//终端选中内容的背景颜色//侧边栏// "activityBar.background": "#000",//界面侧边栏（活动栏）// "activityBar.activeBorder": "#5f7770",//界面侧边栏-选项卡选中边框颜色#5f7770"activityBar.activeBackground":"#218376",//界面侧边栏-活动栏选项卡选中背景标记// "activityBar.foreground": "#f8a7a4",//界面侧边栏前景色//通知"badge.background":"#6f78a8",//通知徽章背景色。743a8f"badge.foreground":"#fdfcfc",//通知徽章前景色。"activityBarBadge.background":"#fdfcfc",//侧边活动栏通知徽章背景色"activityBarBadge.foreground":"#003847",//侧边活动栏通知徽章前景色218376//编辑器选项卡// "tab.inactiveBackground": "#000",//非活动选项卡的背景色// "tab.inactiveForeground": "#000",//非活动选项卡的前景色// "tab.activeBackground": "#493f3f",//编辑器当前正在编辑文件选项卡标记  b8b9988c"tab.hoverBackground":"#3e666b",//当前鼠标悬停的选项卡背景色（编辑器活动组内）"tab.hoverForeground":"#d8e0e2cb",//当前鼠标悬停的选项卡前景色（编辑器活动组内）"tab.activeForeground":"#e7c70e",//活动组中活动选项卡的前景色e7c70e#2e9c4a#14d66b// "tab.activeBorder": "#92c488",//活动选项卡底部的边框// "diffEditor.border": "#ff0000",//两个文本编辑器之间的边框颜色// "tab.border": "#01303d",//将选项卡彼此分隔开的边框颜色#003847"tab.activeBorderTop":"#00d9ff",//活动选项卡顶部的边框// "tab.hoverBorder": "#00d9ff",//选项卡被悬停时用于突出显示的边框(在底部)//菜单栏// "menubar.selectionBackground": "#C48888",//顶部所选菜单栏// "menu.selectionBackground": "#73c720",//菜单栏内所选项// "menu.selectionBorder": "#C48888",//菜单中所选菜单项的边框颜色// "menu.foreground": "#fdf4c1",//菜单项的前景颜色// "menu.background": "#c48888",//菜单项的背景颜色// "menu.separatorBackground": "#eb0c0c",//菜单中分隔线的颜色//编辑器// "editor.selectionBackground": "#701c81",//选中内容的背景颜色135564,#2e4e52// "editor.findMatchBorder": "#ff0000",// "editor.selectionHighlightBackground": "#4f486da9",//单机点击代码后的颜色&与所选内容具有相同内容的区域颜色135564，135564ab// "editor.selectionHighlightBorder": "#ff0000",//与所选项内容相同的区域的边框颜色。// "editor.rangeHighlightBackground": "#ff0000",//当前搜索匹配项所在行的背景色"editor.rangeHighlightBorder":"#f1ebeb",//当前搜索匹配项所在行的边框背景色"editor.selectionForeground":"#ee4444",//fcfcfc，ee444// "editor.hoverHighlightBackground": "#f03c81",//鼠标悬停内容的颜色"editor.findMatchBackground":"#ffee00",//当前搜索匹配项的颜色"editor.findMatchHighlightBackground":"#797874ef",//其他搜索匹配项的颜色"editor.findMatchHighlightBorder":"#ffee00cb",//其他搜索匹配项的边框颜色// "editorBracketMatch.background": "#ff0000",//匹配括号的背景色// "editorBracketMatch.border": "#ff0000",//匹配括号的背景边框色"editorCursor.background":"#f9faf9",//编辑器光标背景色"editorCursor.foreground":"#f9faf9",//编辑器光标颜色// "editor.lineHighlightBackground": "#0f56687e",//光标所在行高亮文本的背景颜色0f56687e// "editor.lineHighlightBorder": "#ddeb1221",//光标所在行高亮文本的边框色"textCodeBlock.background":"#99198e94",//9bf706"editor.wordHighlightBackground":"#04fcc6",//单机点击选择相同代码后的颜色(主要用于html标签)"editorGutter.background":"#1e3441",//编辑器导航线的背景色，导航线包括边缘符号和行号"editorLineNumber.foreground":"#acb9b8",//编辑器行号颜色// "editorLineNumber.activeForeground": "#faf5f5",//编辑器活动行号的颜色// "editor.background": "#002B36",//编辑器背景颜色（这个设置会影响控制台背景色）// "editor.foreground": "#f5f0f0",//编辑器默认前景色(字体颜色)"list.focusBackground":"#006f21",//在编辑器中输入内容时联想列表内被选中项的背景色#005a6f,#7be00886,#7be00881// "editorWidget.background": "#013b4d",//编辑器组件(如查找/替换/输入联想框)背景颜色。#00212B,013b4d"editorWidget.border":"#078d7b",//编辑器小部件的边框颜色// "editorWidget.foreground": "#ff0000",//编辑器小部件的前景色// "editorHoverWidget.background": "#004052",//编辑器悬停提示的背景颜色#004052"editorWidget.resizeBorder":"#0cbda5",//编辑器小部件大小调整条的边框颜色"editorWhitespace.foreground":"#e9e8f0d0",//编辑器选中空白字符（如空格）时字符的颜色"minimap.selectionHighlight":"#e4ebea",//编辑器选区在迷你地图中对应的标记颜色#274642// "editorIndentGuide.background": "#93A1A180",//编辑器缩进参考线的颜色#93A1A180// "editorIndentGuide.activeBackground": "#C3E1E180",//编辑器活动缩进参考线的颜色#C3E1E180},//编辑器内容--代码段颜色&语法高亮颜色"editor.tokenColorCustomizations":{// "comments": "#9ea023da",//注释// "keywords": "#0a0",//关键字// "variables": "#f00",//变量名// "strings": "#18170fbd",//字符串// "functions": "#fc735bc9",//函数名// "numbers": "#AE81FF",//数字// "types": "#e0139c",//类型名"storage":"#FF0000","textMateRules":[//函数{"scope":"meta.function-call.generic.python","settings":{"foreground":"#0f7fd2"//#578dac, ##0f7fd2, #78a7cc,#84b6dd}},//函数内固定参数名{"scope":"variable.parameter.function-call.python","settings":{"foreground":"#6b689efb"//#859900,79831f}},//三引号注释{"scope":"string.quoted.docstring.multi.python","settings":{"foreground":"#10d4b0"//#709baa,}},// //类名&方法名// {//     "scope": "storage.type",//     "settings": {//         "foreground": "#a8b1a6"//     }// },//关键字{"name":"keyword","scope":"keyword.control.flow.python","settings":{"foreground":"#14b414"//#29cf3d, #049415, #14b414}},//类型名称{"name":"types",// "scope": ["comment", "comment",],"scope":"support.type.python","settings":{"foreground":"#eea0cd"//#eea0cd}},]},// "editor.fontLigatures": null,//设置不同语言的缩进距离// "[python]": {//     "editor.tabSize": 4// },"[html]":{"editor.tabSize":2},"[css]":{"editor.tabSize":2},"[javascript]":{"editor.tabSize":2},}

END