说明

本文更新于2019-02-18,使用VSCode 1.14.1,操作系统为Windows。

配置文件

“文件-首选项-颜色主题”即可显示所有可用的颜色主题,上下选择后Enter即可。也可通过Ctrl+Shift+P输入color theme回车后调出“首选项:颜色主题”面板。

记VSCode的安装目录为$RELEASE,默认的颜色主题配置文件都位于$RELEASE/resources/app/extensions目录中。以theme-开头的目录即为颜色主题配置(事实上,其中有些是文件图标主题)。除若干主题会共用一个目录外(theme-defaults),大多数主题都是一个主题一个目录。

每个颜色主题配置目录包含以下文件:themes目录、OSSREADME.jsonpackage.jsonthemes目录下通常使用.json设置具体的配色方案;OSSREADME.json描述版权等相关信息,可以忽略;package.json令VSCode读取后能区分不同的配色方案。

下面新增一个灰色调颜色主题。在$RELEASE/resources/app/extensions目录下新增如下目录结构。如果你不关心配置文件相关参数的解释,可无需细读后面内容,只需将相应的配置文本复制至配置文件中即可,但需注意文件均为UTF-8编码。

  1. $RELEASE/resources/app/extensions/
  2. \_ theme-gv-gray/
  3. \_ themes/
  4. | \_ gv-gray-color-theme.json
  5. |_ package.json

预览图

package.json

package.json文件内容如下:

  1. {
  2. "name": "theme-gv-gray",
  3. "version": "0.1.0",
  4. "publisher": "GV",
  5. "engines": { "vscode": "*" },
  6. "contributes": {
  7. "themes": [
  8. {
  9. "label": "gv-gray",
  10. "uiTheme": "vs",
  11. "path": "./themes/gv-gray-color-theme.json"
  12. }
  13. ]
  14. }
  15. }
参数名 作用
name 主题ID,必需在VSCode中全局唯一,即所有主题的package.json中该值均不能重复
contributes -> themes -> label 主题名,“文件-首选项-颜色主题”的列表中显示该值
contributes -> themes -> uiTheme VSCode整体的UI主题,vs为浅色主题
contributes -> themes -> path 定义配色方案的文件名,如为相对路径则相对于此文件

gv-gray-color-theme.json

因配置文件内容太长放至文末,以下说明对照配置文件内容阅读更易理解。

VSCode使用其以下两个节点:

参数名 作用
colors VSCode各个UI组件的颜色
tokenColors 语法高亮颜色

colors

colors节点的内容直接通过键值对参数描述,以下列举几个参数的作用:

图示 参数名 作用
2 activityBar.background 活动栏背景色
1 activityBar.foreground 活动栏前景色(例如用于图标)
12 editor.background 编辑器背景颜色
13 editor.foreground 编辑器默认前景色
editor.findMatchBackground 当前搜索匹配项的颜色
editor.findMatchHighlightBackground 其他搜索匹配项的颜色
15 editor.lineHighlightBackground 光标所在行高亮文本的背景颜色
editor.selectionBackground 编辑器所选内容的颜色
editor.selectionHighlightBackground 与所选内容具有相同内容的区域颜色
editor.rangeHighlightBackground 突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
16 editorBracketMatch.background 匹配括号的背景色
14 editorCursor.foreground 编辑器光标颜色
11 editorGutter.background 编辑器导航线的背景色,导航线包括边缘符号和行号
10 editorLineNumber.foreground 编辑器行号颜色
5 sideBar.background 侧边栏背景色
4 sideBar.foreground 侧边栏前景色
3 sideBarSectionHeader.background 侧边栏节标题的背景颜色
17 statusBar.background 标准状态栏背景色
17 statusBar.noFolderBackground 没有打开文件夹时状态栏的背景色
17 statusBar.debuggingBackground 调试程序时状态栏的背景色
9 tab.activeBackground 活动选项卡的背景色
8 tab.activeForeground 活动组中活动选项卡的前景色
7 tab.inactiveBackground 非活动选项卡的背景色
6 tab.inactiveForeground 活动组中非活动选项卡的前景色

tokenColors

tokenColors使用一个对象数组描述各语法高亮颜色。每个对象有如下结构:

  1. {
  2. "name": "Comment",
  3. "scope": [
  4. "comment",
  5. "punctuation.definition.comment"
  6. ],
  7. "settings": {
  8. "background": "#ffffff",
  9. "fontStyle": "italic",
  10. "foreground": "#000000"
  11. }
  12. }
参数名 作用
name 规则描述,一段容易理解的描述性文字
scope 作用域,指定使用那些VSCode内部对象,其含义参看Scope Naming
setting -> background 背景色,可选
setting -> fontStyle 字体,可选,为bold、italic、underline
setting -> foreground 前景色,可选

以下列举文末的配置文件中几个name所指定的参数的作用:

参数名 作用
Character 字符
Class 类名
Comment 注释
Function 函数名
Keyword 关键字
Number 数值
Operator 运算符
Parameter 函数参数
Punctuation 标点符号
String 字符串
Type 内置类型
Variable 变量名

文件内容

  1. {
  2. "name": "gv-gray",
  3. "colors": {
  4. "activityBar.background": "#e0e0e0",
  5. "activityBar.foreground": "#000000",
  6. "editor.background": "#c8c8c8",
  7. "editor.foreground": "#000000",
  8. "editor.findMatchBackground": "#ffff00",
  9. "editor.findMatchHighlightBackground": "#ffff00",
  10. "editor.lineHighlightBackground": "#c0c0c0",
  11. "editor.selectionBackground": "#b0b0b0",
  12. "editor.selectionHighlightBackground": "#dfdfdf",
  13. "editor.rangeHighlightBackground": "#b0b0b0",
  14. "editorBracketMatch.background": "#b0b0b0",
  15. "editorCursor.foreground": "#333333",
  16. "editorGutter.background": "#d3d3d3",
  17. "editorLineNumber.foreground": "#777777",
  18. "sideBar.background": "#f5f5f5",
  19. "sideBar.foreground": "#000000",
  20. "sideBarSectionHeader.background": "#e0e0e0",
  21. "statusBar.background": "#444444",
  22. "statusBar.noFolderBackground": "#444444",
  23. "statusBar.debuggingBackground": "#444444",
  24. "tab.activeBackground": "#afafaf",
  25. "tab.activeForeground": "#000000",
  26. "tab.inactiveBackground": "#e0e0e0",
  27. "tab.inactiveForeground": "#000000",
  28. // Other colors.
  29. "activityBarBadge.background": "#705697",
  30. "button.background": "#705697",
  31. "dropdown.background": "#F5F5F5",
  32. "editorGroup.dropBackground": "#C9D0D988",
  33. "editorWhitespace.foreground": "#AAAAAA",
  34. "focusBorder": "#A6B39B",
  35. "inputOption.activeBorder": "#adafb7",
  36. "inputValidation.infoBorder": "#4ec1e5",
  37. "inputValidation.infoBackground": "#f2fcff",
  38. "inputValidation.warningBackground": "#fffee2",
  39. "inputValidation.warningBorder": "#ffe055",
  40. "inputValidation.errorBackground": "#ffeaea",
  41. "inputValidation.errorBorder": "#f1897f",
  42. "list.activeSelectionForeground": "#6c6c6c",
  43. "list.focusBackground": "#CADEB9",
  44. "list.activeSelectionBackground": "#c4d9b1",
  45. "list.inactiveSelectionBackground": "#d3dbcd",
  46. "list.highlightForeground": "#9769dc",
  47. "notification.background": "#442e66",
  48. "panel.background": "#F5F5F5",
  49. "peekViewEditor.matchHighlightBackground": "#C2DFE3",
  50. "peekViewTitle.background": "#F2F8FC",
  51. "peekViewEditor.background": "#F2F8FC",
  52. "peekViewResult.background": "#F2F8FC",
  53. "peekView.border": "#705697",
  54. "peekViewResult.matchHighlightBackground": "#93C6D6",
  55. "pickerGroup.foreground": "#A6B39B",
  56. "pickerGroup.border": "#749351"
  57. },
  58. "tokenColors": [
  59. {
  60. "settings": {
  61. "background": "#ffffff",
  62. "foreground": "#000000"
  63. }
  64. },
  65. {
  66. "name": "Character",
  67. "scope": [
  68. "constant",
  69. "constant.character"
  70. ],
  71. "settings": {
  72. "foreground": "#008000"
  73. }
  74. },
  75. {
  76. "name": "Class",
  77. "scope": [
  78. "entity.name.type",
  79. "entity.other.inherited-class",
  80. "support.class"
  81. ],
  82. "settings": {
  83. "foreground": "#000080"
  84. }
  85. },
  86. {
  87. "name": "Comment",
  88. "scope": [
  89. "comment",
  90. "punctuation.definition.comment"
  91. ],
  92. "settings": {
  93. "fontStyle": "italic",
  94. "foreground": "#0066ff"
  95. }
  96. },
  97. {
  98. "name": "Function",
  99. "scope": [
  100. "entity.name.function",
  101. "support.function"
  102. ],
  103. "settings": {
  104. "foreground": "#000000"
  105. }
  106. },
  107. {
  108. "name": "Keyword",
  109. "scope": [
  110. "keyword",
  111. "storage"
  112. ],
  113. "settings": {
  114. "fontStyle": "bold",
  115. "foreground": "#000080"
  116. }
  117. },
  118. {
  119. "name": "Number",
  120. "scope": [
  121. "constant.numeric"
  122. ],
  123. "settings": {
  124. "foreground": "#0044bb"
  125. }
  126. },
  127. {
  128. "name": "Operator",
  129. "scope": "keyword.operator",
  130. "settings": {
  131. "foreground": "#000000"
  132. }
  133. },
  134. {
  135. "name": "Parameter",
  136. "scope": "variable.parameter",
  137. "settings": {
  138. "fontStyle": "underline"
  139. }
  140. },
  141. {
  142. "name": "Punctuation",
  143. "scope": "punctuation",
  144. "settings": {
  145. "foreground": "#000000"
  146. }
  147. },
  148. {
  149. "name": "String",
  150. "scope": "string",
  151. "settings": {
  152. "foreground": "#008000"
  153. }
  154. },
  155. {
  156. "name": "Type",
  157. "scope": [
  158. "storage.type",
  159. "support.type"
  160. ],
  161. "settings": {
  162. "fontStyle": "",
  163. "foreground": "#000080"
  164. }
  165. },
  166. {
  167. "name": "Variable",
  168. "scope": [
  169. "support.variable",
  170. "variable"
  171. ],
  172. "settings": {
  173. "foreground": "#000000"
  174. }
  175. },
  176. // Other token colors.
  177. {
  178. "name": "Comments: Preprocessor",
  179. "scope": "comment.block.preprocessor",
  180. "settings": {
  181. "fontStyle": "",
  182. "foreground": "#AAAAAA"
  183. }
  184. },
  185. {
  186. "name": "Comments: Documentation",
  187. "scope": [
  188. "comment.documentation",
  189. "comment.block.documentation"
  190. ],
  191. "settings": {
  192. "foreground": "#448C27"
  193. }
  194. },
  195. {
  196. "name": "Invalid - Deprecated",
  197. "scope": "invalid.deprecated",
  198. "settings": {
  199. "background": "#96000014"
  200. }
  201. },
  202. {
  203. "name": "Invalid - Illegal",
  204. "scope": "invalid.illegal",
  205. "settings": {
  206. "background": "#96000014",
  207. "foreground": "#660000"
  208. }
  209. },
  210. {
  211. "name": "Language Constants",
  212. "scope": [
  213. "constant.language",
  214. "support.constant",
  215. "variable.language"
  216. ],
  217. "settings": {
  218. "foreground": "#AB6526"
  219. }
  220. },
  221. {
  222. "name": "Exceptions",
  223. "scope": "entity.name.exception",
  224. "settings": {
  225. "foreground": "#660000"
  226. }
  227. },
  228. {
  229. "name": "Sections",
  230. "scope": "entity.name.section",
  231. "settings": {
  232. "fontStyle": "bold"
  233. }
  234. },
  235. {
  236. "name": "Strings: Escape Sequences",
  237. "scope": "constant.character.escape",
  238. "settings": {
  239. "foreground": "#777777"
  240. }
  241. },
  242. {
  243. "name": "Strings: Regular Expressions",
  244. "scope": "string.regexp",
  245. "settings": {
  246. "foreground": "#4B83CD"
  247. }
  248. },
  249. {
  250. "name": "Strings: Symbols",
  251. "scope": "constant.other.symbol",
  252. "settings": {
  253. "foreground": "#AB6526"
  254. }
  255. },
  256. {
  257. "name": "Embedded Source",
  258. "scope": [
  259. "string source",
  260. "text source"
  261. ],
  262. "settings": {
  263. "background": "#EAEBE6"
  264. }
  265. },
  266. {
  267. "name": "HTML: Doctype Declaration",
  268. "scope": [
  269. "meta.tag.sgml.doctype",
  270. "meta.tag.sgml.doctype string",
  271. "meta.tag.sgml.doctype entity.name.tag",
  272. "meta.tag.sgml punctuation.definition.tag.html"
  273. ],
  274. "settings": {
  275. "foreground": "#AAAAAA"
  276. }
  277. },
  278. {
  279. "name": "HTML: Tags",
  280. "scope": [
  281. "meta.tag",
  282. "punctuation.definition.tag.html",
  283. "punctuation.definition.tag.begin.html",
  284. "punctuation.definition.tag.end.html"
  285. ],
  286. "settings": {
  287. "foreground": "#91B3E0"
  288. }
  289. },
  290. {
  291. "name": "HTML: Tag Names",
  292. "scope": "entity.name.tag",
  293. "settings": {
  294. "foreground": "#4B83CD"
  295. }
  296. },
  297. {
  298. "name": "HTML: Attribute Names",
  299. "scope": [
  300. "meta.tag entity.other.attribute-name",
  301. "entity.other.attribute-name.html"
  302. ],
  303. "settings": {
  304. "fontStyle": "italic",
  305. "foreground": "#91B3E0"
  306. }
  307. },
  308. {
  309. "name": "HTML: Entities",
  310. "scope": [
  311. "constant.character.entity",
  312. "punctuation.definition.entity"
  313. ],
  314. "settings": {
  315. "foreground": "#AB6526"
  316. }
  317. },
  318. {
  319. "name": "CSS: Selectors",
  320. "scope": [
  321. "meta.selector",
  322. "meta.selector entity",
  323. "meta.selector entity punctuation",
  324. "entity.name.tag.css"
  325. ],
  326. "settings": {
  327. "foreground": "#7A3E9D"
  328. }
  329. },
  330. {
  331. "name": "CSS: Property Names",
  332. "scope": [
  333. "meta.property-name",
  334. "support.type.property-name"
  335. ],
  336. "settings": {
  337. "foreground": "#AB6526"
  338. }
  339. },
  340. {
  341. "name": "CSS: Property Values",
  342. "scope": [
  343. "meta.property-value",
  344. "meta.property-value constant.other",
  345. "support.constant.property-value"
  346. ],
  347. "settings": {
  348. "foreground": "#448C27"
  349. }
  350. },
  351. {
  352. "name": "CSS: Important Keyword",
  353. "scope": "keyword.other.important",
  354. "settings": {
  355. "fontStyle": "bold"
  356. }
  357. },
  358. {
  359. "name": "Markup: Changed",
  360. "scope": "markup.changed",
  361. "settings": {
  362. "background": "#FFFFDD",
  363. "foreground": "#000000"
  364. }
  365. },
  366. {
  367. "name": "Markup: Deletion",
  368. "scope": "markup.deleted",
  369. "settings": {
  370. "background": "#FFDDDD",
  371. "foreground": "#000000"
  372. }
  373. },
  374. {
  375. "name": "Markup: Emphasis",
  376. "scope": "markup.italic",
  377. "settings": {
  378. "fontStyle": "italic"
  379. }
  380. },
  381. {
  382. "name": "Markup: Error",
  383. "scope": "markup.error",
  384. "settings": {
  385. "background": "#96000014",
  386. "foreground": "#660000"
  387. }
  388. },
  389. {
  390. "name": "Markup: Insertion",
  391. "scope": "markup.inserted",
  392. "settings": {
  393. "background": "#DDFFDD",
  394. "foreground": "#000000"
  395. }
  396. },
  397. {
  398. "name": "Markup: Link",
  399. "scope": "meta.link",
  400. "settings": {
  401. "foreground": "#4B83CD"
  402. }
  403. },
  404. {
  405. "name": "Markup: Output",
  406. "scope": [
  407. "markup.output",
  408. "markup.raw"
  409. ],
  410. "settings": {
  411. "foreground": "#777777"
  412. }
  413. },
  414. {
  415. "name": "Markup: Prompt",
  416. "scope": "markup.prompt",
  417. "settings": {
  418. "foreground": "#777777"
  419. }
  420. },
  421. {
  422. "name": "Markup: Heading",
  423. "scope": "markup.heading",
  424. "settings": {
  425. "foreground": "#AA3731"
  426. }
  427. },
  428. {
  429. "name": "Markup: Strong",
  430. "scope": "markup.bold",
  431. "settings": {
  432. "fontStyle": "bold"
  433. }
  434. },
  435. {
  436. "name": "Markup: Traceback",
  437. "scope": "markup.traceback",
  438. "settings": {
  439. "foreground": "#660000"
  440. }
  441. },
  442. {
  443. "name": "Markup: Underline",
  444. "scope": "markup.underline",
  445. "settings": {
  446. "fontStyle": "underline"
  447. }
  448. },
  449. {
  450. "name": "Markup Quote",
  451. "scope": "markup.quote",
  452. "settings": {
  453. "foreground": "#7A3E9D"
  454. }
  455. },
  456. {
  457. "name": "Markup Lists",
  458. "scope": "markup.list",
  459. "settings": {
  460. "foreground": "#4B83CD"
  461. }
  462. },
  463. {
  464. "name": "Markup Styling",
  465. "scope": [
  466. "markup.bold",
  467. "markup.italic"
  468. ],
  469. "settings": {
  470. "foreground": "#448C27"
  471. }
  472. },
  473. {
  474. "name": "Markup Inline",
  475. "scope": "markup.inline.raw",
  476. "settings": {
  477. "fontStyle": "",
  478. "foreground": "#AB6526"
  479. }
  480. },
  481. {
  482. "name": "Extra: Diff Range",
  483. "scope": [
  484. "meta.diff.range",
  485. "meta.diff.index",
  486. "meta.separator"
  487. ],
  488. "settings": {
  489. "background": "#DDDDFF",
  490. "foreground": "#434343"
  491. }
  492. },
  493. {
  494. "name": "Extra: Diff From",
  495. "scope": "meta.diff.header.from-file",
  496. "settings": {
  497. "background": "#FFDDDD",
  498. "foreground": "#434343"
  499. }
  500. },
  501. {
  502. "name": "Extra: Diff To",
  503. "scope": "meta.diff.header.to-file",
  504. "settings": {
  505. "background": "#DDFFDD",
  506. "foreground": "#434343"
  507. }
  508. }
  509. ]
  510. }

VSCode自定义配色方案的更多相关文章

  1. [原]globalmapper设置高程配色(globalmapper自定义配色方案)

    1.使用的globalmapper版本:1.8以上(之前的版本也应该支持) 2.将全球DEM加载进去 (零时找的小DEM  全球7级) 3.右击此处,选择“高程图例选项” 4.选择 配置-着色器选项 ...

  2. vim自定义配色方案,图文并茂

    1.先上图                                 下面是tcpdump的源码.颜色根据自己的喜好配置,我比较喜欢亮的颜色,看的清楚! 2.下载辅助配置文件           ...

  3. Confluence 6 自定义配色方案

    Confluence 的管理员可以修改 Confluence 的色彩配色方案.站点的默认配色方案将会在站点的默认空间上同时生效. 希望修改站点的配色方案: 在屏幕的右上角单击 控制台按钮 ,然后选择  ...

  4. 01-vscode自定义配色方案 插件基础上

    01-下载相关主题插件 02- 点击设置按钮 复制id 03-进入插件文件 C:\Users\Administrator\.vscode\extensions 04-复制刚才的id 05-themes ...

  5. LiteIDE灰调配色方案

    说明 本文写于2017-04-03,使用LiteIDE X31(基于Qt 4.8.5),操作系统为Windows. 使用 LiteIDE下载后解压即可使用.配色方案的所有配置文件都位于liteide/ ...

  6. Sublime Text怎样自定义配色和主题

    一.自定义配色方案 1 基础知识 配色方案[Color Scheme]文件保存在以下路径[ST安装目录]: "D:\Program Files\Sublime Text\Packages\C ...

  7. html+css学习笔记:实用LessColor函数搭建配色方案

    http://www.zcool.com.cn/article/ZMTUyNDc2.html 前言:用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,L ...

  8. phpStorm 快捷键收集以及配色方案

    仅收集我在开发过程中觉得对我个人很有帮助的 ctrl + e ;查看最近打开的工程文件 ctrl+shift+n比如要跳转到templates/default/index.html基本上输入te/de ...

  9. Confluence 6 编辑一个空间的配色方案

    空间默认继承全局的配色方案.但是,如果你是空间管理员的话,你可以对默认继承的全局方案进行调整,使用自定义的配色方案. 为一个空间修改配色方案: 进入空间后,然后从边栏的底部选择 空间工具(Space ...

随机推荐

  1. eclipse 好用的插件总结

    改变eclipse的背景色,各种关键词颜色的插件. color theme. 在mac下最好是通过手动复制粘贴jar文件到, eclipse的plugins下面. 通过Install new soft ...

  2. Ubuntu发行版升级

    从UK 13.10升级到UK 14.10 方法一: 1.sudo apt-get update   2.sudo update-manager -c -d   3.选择upgrade(升级)  方法二 ...

  3. PHPCMS v9 自定义表单添加验证码

    1.  在 \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=&quo ...

  4. JavaWeb 环境搭建

    环境搭建 JDK7 Java基本开发工具包 安装(目录[不要使用中文和空格].JDK+JRE) 配置环境变量[JAVA_HOME.path.classpath] 2.        Tomcat7 提 ...

  5. OpenCV探索之路(十七):Mat和IplImage访问每个像素的方法总结

    在opencv的编程中,遍历访问图像元素是经常遇到的操作,掌握其方法非常重要,无论是Mat类的像素访问,还是IplImage结构体的访问的方法,都必须扎实掌握,毕竟,图像处理本质上就是对像素的各种操作 ...

  6. springboot1.5.4 配置druid1.1.0(使用druid-spring-boot-starter)

    原文:https://github.com/x113773/testall/issues/11 ### Druid 最近发布了1.1.0 版本,并且提供了 [druid-spring-boot-sta ...

  7. Kafka 源代码分析之ByteBufferMessageSet

    这里分析一下message的封装类ByteBufferMessageSet类 ByteBufferMessageSet类的源代码在源代码目录message目录下.这个类主要封装了message,mes ...

  8. [leetcode-521-Longest Uncommon Subsequence I]

    Given a group of two strings, you need to find the longest uncommon subsequence of this group of two ...

  9. 【Android Developers Training】 62. 搭建一个OpenGL ES环境

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. 禁用自动映射的 Exchange 邮箱

    客户最近询问他们无法从用户的Outlook配置文件中删除邮箱.在这种情况下,它们是共享邮箱,并出现在Outlook的左窗格中.但原因和解决方法同样适用于用户邮箱.并且 无论用户邮箱在本地 Exchan ...