主頁 > 知識(shí)庫(kù) > VSCode自定義配色方案的實(shí)現(xiàn)

VSCode自定義配色方案的實(shí)現(xiàn)

熱門標(biāo)簽:外呼系統(tǒng)號(hào)顯示星號(hào)怎么看 承德地圖標(biāo)注公司收費(fèi) suitecrm 地圖標(biāo)注 銀川語音外呼系統(tǒng)中心 鶴壁外呼系統(tǒng)公司 華創(chuàng)e路航彩票銷售點(diǎn)地圖標(biāo)注 臨沂ai電銷機(jī)器人招商 揭陽電腦外呼系統(tǒng)公司 高德地圖標(biāo)注常顯

說明

本文更新于2019-02-18,使用VSCode 1.14.1,操作系統(tǒng)為Windows。

配置文件

“文件-首選項(xiàng)-顏色主題”即可顯示所有可用的顏色主題,上下選擇后Enter即可。也可通過Ctrl+Shift+P輸入color theme回車后調(diào)出“首選項(xiàng):顏色主題”面板。

記VSCode的安裝目錄為$RELEASE,默認(rèn)的顏色主題配置文件都位于$RELEASE/resources/app/extensions目錄中。以theme-開頭的目錄即為顏色主題配置(事實(shí)上,其中有些是文件圖標(biāo)主題)。除若干主題會(huì)共用一個(gè)目錄外(theme-defaults),大多數(shù)主題都是一個(gè)主題一個(gè)目錄。

每個(gè)顏色主題配置目錄包含以下文件:themes目錄、OSSREADME.json、package.json。themes目錄下通常使用.json設(shè)置具體的配色方案;OSSREADME.json描述版權(quán)等相關(guān)信息,可以忽略;package.json令VSCode讀取后能區(qū)分不同的配色方案。

下面新增一個(gè)灰色調(diào)顏色主題。在$RELEASE/resources/app/extensions目錄下新增如下目錄結(jié)構(gòu)。如果你不關(guān)心配置文件相關(guān)參數(shù)的解釋,可無需細(xì)讀后面內(nèi)容,只需將相應(yīng)的配置文本復(fù)制至配置文件中即可,但需注意文件均為UTF-8編碼。

$RELEASE/resources/app/extensions/
 \_ theme-gv-gray/
   \_ themes/
   |  \_ gv-gray-color-theme.json
   |_ package.json

預(yù)覽圖

package.json

package.json文件內(nèi)容如下:

{
	"name": "theme-gv-gray",
	"version": "0.1.0",
	"publisher": "GV",
	"engines": { "vscode": "*" },
	"contributes": {
		"themes": [
			{
				"label": "gv-gray",
				"uiTheme": "vs",
				"path": "./themes/gv-gray-color-theme.json"
			}
		]
	}
}

參數(shù)名 作用
name 主題ID,必需在VSCode中全局唯一,即所有主題的package.json中該值均不能重復(fù)
contributes -> themes -> label 主題名,“文件-首選項(xiàng)-顏色主題”的列表中顯示該值
contributes -> themes -> uiTheme VSCode整體的UI主題,vs為淺色主題
contributes -> themes -> path 定義配色方案的文件名,如為相對(duì)路徑則相對(duì)于此文件

因配置文件內(nèi)容太長(zhǎng)放至文末,以下說明對(duì)照配置文件內(nèi)容閱讀更易理解。

VSCode使用其以下兩個(gè)節(jié)點(diǎn):

參數(shù)名 作用
colors VSCode各個(gè)UI組件的顏色
tokenColors 語法高亮顏色

colors節(jié)點(diǎn)的內(nèi)容直接通過鍵值對(duì)參數(shù)描述,以下列舉幾個(gè)參數(shù)的作用:

圖示 參數(shù)名 作用
2 activityBar.background 活動(dòng)欄背景色
1 activityBar.foreground 活動(dòng)欄前景色(例如用于圖標(biāo))
12 editor.background 編輯器背景顏色
13 editor.foreground 編輯器默認(rèn)前景色
editor.findMatchBackground 當(dāng)前搜索匹配項(xiàng)的顏色
editor.findMatchHighlightBackground 其他搜索匹配項(xiàng)的顏色
15 editor.lineHighlightBackground 光標(biāo)所在行高亮文本的背景顏色
editor.selectionBackground 編輯器所選內(nèi)容的顏色
editor.selectionHighlightBackground 與所選內(nèi)容具有相同內(nèi)容的區(qū)域顏色
editor.rangeHighlightBackground 突出顯示范圍的背景顏色,例如 "Quick Open" 和“查找”功能
16 editorBracketMatch.background 匹配括號(hào)的背景色
14 editorCursor.foreground 編輯器光標(biāo)顏色
11 editorGutter.background 編輯器導(dǎo)航線的背景色,導(dǎo)航線包括邊緣符號(hào)和行號(hào)
10 editorLineNumber.foreground 編輯器行號(hào)顏色
5 sideBar.background 側(cè)邊欄背景色
4 sideBar.foreground 側(cè)邊欄前景色
3 sideBarSectionHeader.background 側(cè)邊欄節(jié)標(biāo)題的背景顏色
17 statusBar.background 標(biāo)準(zhǔn)狀態(tài)欄背景色
17 statusBar.noFolderBackground 沒有打開文件夾時(shí)狀態(tài)欄的背景色
17 statusBar.debuggingBackground 調(diào)試程序時(shí)狀態(tài)欄的背景色
9 tab.activeBackground 活動(dòng)選項(xiàng)卡的背景色
8 tab.activeForeground 活動(dòng)組中活動(dòng)選項(xiàng)卡的前景色
7 tab.inactiveBackground 非活動(dòng)選項(xiàng)卡的背景色
6 tab.inactiveForeground 活動(dòng)組中非活動(dòng)選項(xiàng)卡的前景色

tokenColors

tokenColors使用一個(gè)對(duì)象數(shù)組描述各語法高亮顏色。每個(gè)對(duì)象有如下結(jié)構(gòu):

{
	"name": "Comment",
	"scope": [
		"comment",
		"punctuation.definition.comment"
	],
	"settings": {
		"background": "#ffffff",
		"fontStyle": "italic",
		"foreground": "#000000"
	}
}

參數(shù)名 作用
name 規(guī)則描述,一段容易理解的描述性文字
scope 作用域,指定使用那些VSCode內(nèi)部對(duì)象,其含義參看Scope Naming
setting -> background 背景色,可選
setting -> fontStyle 字體,可選,為bold、italic、underline
setting -> foreground 前景色,可選

以下列舉文末的配置文件中幾個(gè)name所指定的參數(shù)的作用:

參數(shù)名 作用
Character 字符
Class 類名
Comment 注釋
Function 函數(shù)名
Keyword 關(guān)鍵字
Number 數(shù)值
Operator 運(yùn)算符
Parameter 函數(shù)參數(shù)
Punctuation 標(biāo)點(diǎn)符號(hào)
String 字符串
Type 內(nèi)置類型
Variable 變量名

文件內(nèi)容

{
	"name": "gv-gray",
	"colors": {
		"activityBar.background": "#e0e0e0",
		"activityBar.foreground": "#000000",
		"editor.background": "#c8c8c8",
		"editor.foreground": "#000000",
		"editor.findMatchBackground": "#ffff00",
		"editor.findMatchHighlightBackground": "#ffff00",
		"editor.lineHighlightBackground": "#c0c0c0",
		"editor.selectionBackground": "#b0b0b0",
		"editor.selectionHighlightBackground": "#dfdfdf",
		"editor.rangeHighlightBackground": "#b0b0b0",
		"editorBracketMatch.background": "#b0b0b0",
		"editorCursor.foreground": "#333333",
		"editorGutter.background": "#d3d3d3",
		"editorLineNumber.foreground": "#777777",
		"sideBar.background": "#f5f5f5",
		"sideBar.foreground": "#000000",
		"sideBarSectionHeader.background": "#e0e0e0",
		"statusBar.background": "#444444",
		"statusBar.noFolderBackground": "#444444",
		"statusBar.debuggingBackground": "#444444",
		"tab.activeBackground": "#afafaf",
		"tab.activeForeground": "#000000",
		"tab.inactiveBackground": "#e0e0e0",
		"tab.inactiveForeground": "#000000",
		// Other colors.
		"activityBarBadge.background": "#705697",
		"button.background": "#705697",
		"dropdown.background": "#F5F5F5",
		"editorGroup.dropBackground": "#C9D0D988",
		"editorWhitespace.foreground": "#AAAAAA",
		"focusBorder": "#A6B39B",
		"inputOption.activeBorder": "#adafb7",
		"inputValidation.infoBorder": "#4ec1e5",
		"inputValidation.infoBackground": "#f2fcff",
		"inputValidation.warningBackground": "#fffee2",
		"inputValidation.warningBorder": "#ffe055",
		"inputValidation.errorBackground": "#ffeaea",
		"inputValidation.errorBorder": "#f1897f",
		"list.activeSelectionForeground": "#6c6c6c",
		"list.focusBackground": "#CADEB9",
		"list.activeSelectionBackground": "#c4d9b1",
		"list.inactiveSelectionBackground": "#d3dbcd",
		"list.highlightForeground": "#9769dc",
		"notification.background": "#442e66",
		"panel.background": "#F5F5F5",
		"peekViewEditor.matchHighlightBackground": "#C2DFE3",
		"peekViewTitle.background": "#F2F8FC",
		"peekViewEditor.background": "#F2F8FC",
		"peekViewResult.background": "#F2F8FC",
		"peekView.border": "#705697",
		"peekViewResult.matchHighlightBackground": "#93C6D6",
		"pickerGroup.foreground": "#A6B39B",
		"pickerGroup.border": "#749351"
	},
	"tokenColors": [
		{
			"settings": {
				"background": "#ffffff",
				"foreground": "#000000"
			}
		},
		{
			"name": "Character",
			"scope": [
				"constant",
				"constant.character"
			],
			"settings": {
				"foreground": "#008000"
			}
		},
		{
			"name": "Class",
			"scope": [
				"entity.name.type",
				"entity.other.inherited-class",
				"support.class"
			],
			"settings": {
				"foreground": "#000080"
			}
		},
		{
			"name": "Comment",
			"scope": [
				"comment",
				"punctuation.definition.comment"
			],
			"settings": {
				"fontStyle": "italic",
				"foreground": "#0066ff"
			}
		},
		{
			"name": "Function",
			"scope": [
				"entity.name.function",
				"support.function"
			],
			"settings": {
				"foreground": "#000000"
			}
		},
		{
			"name": "Keyword",
			"scope": [
				"keyword",
				"storage"
			],
			"settings": {
				"fontStyle": "bold",
				"foreground": "#000080"
			}
		},
		{
			"name": "Number",
			"scope": [
				"constant.numeric"
			],
			"settings": {
				"foreground": "#0044bb"
			}
		},
		{
			"name": "Operator",
			"scope": "keyword.operator",
			"settings": {
				"foreground": "#000000"
			}
		},
		{
			"name": "Parameter",
			"scope": "variable.parameter",
			"settings": {
				"fontStyle": "underline"
			}
		},
		{
			"name": "Punctuation",
			"scope": "punctuation",
			"settings": {
				"foreground": "#000000"
			}
		},
		{
			"name": "String",
			"scope": "string",
			"settings": {
				"foreground": "#008000"
			}
		},
		{
			"name": "Type",
			"scope": [
				"storage.type",
				"support.type"
			],
			"settings": {
				"fontStyle": "",
				"foreground": "#000080"
			}
		},
		{
			"name": "Variable",
			"scope": [
				"support.variable",
				"variable"
			],
			"settings": {
				"foreground": "#000000"
			}
		},
		// Other token colors.
		{
			"name": "Comments: Preprocessor",
			"scope": "comment.block.preprocessor",
			"settings": {
				"fontStyle": "",
				"foreground": "#AAAAAA"
			}
		},
		{
			"name": "Comments: Documentation",
			"scope": [
				"comment.documentation",
				"comment.block.documentation"
			],
			"settings": {
				"foreground": "#448C27"
			}
		},
		{
			"name": "Invalid - Deprecated",
			"scope": "invalid.deprecated",
			"settings": {
				"background": "#96000014"
			}
		},
		{
			"name": "Invalid - Illegal",
			"scope": "invalid.illegal",
			"settings": {
				"background": "#96000014",
				"foreground": "#660000"
			}
		},
		{
			"name": "Language Constants",
			"scope": [
				"constant.language",
				"support.constant",
				"variable.language"
			],
			"settings": {
				"foreground": "#AB6526"
			}
		},
		{
			"name": "Exceptions",
			"scope": "entity.name.exception",
			"settings": {
				"foreground": "#660000"
			}
		},
		{
			"name": "Sections",
			"scope": "entity.name.section",
			"settings": {
				"fontStyle": "bold"
			}
		},
		{
			"name": "Strings: Escape Sequences",
			"scope": "constant.character.escape",
			"settings": {
				"foreground": "#777777"
			}
		},
		{
			"name": "Strings: Regular Expressions",
			"scope": "string.regexp",
			"settings": {
				"foreground": "#4B83CD"
			}
		},
		{
			"name": "Strings: Symbols",
			"scope": "constant.other.symbol",
			"settings": {
				"foreground": "#AB6526"
			}
		},
		{
			"name": "Embedded Source",
			"scope": [
				"string source",
				"text source"
			],
			"settings": {
				"background": "#EAEBE6"
			}
		},
		{
			"name": "HTML: Doctype Declaration",
			"scope": [
				"meta.tag.sgml.doctype",
				"meta.tag.sgml.doctype string",
				"meta.tag.sgml.doctype entity.name.tag",
				"meta.tag.sgml punctuation.definition.tag.html"
			],
			"settings": {
				"foreground": "#AAAAAA"
			}
		},
		{
			"name": "HTML: Tags",
			"scope": [
				"meta.tag",
				"punctuation.definition.tag.html",
				"punctuation.definition.tag.begin.html",
				"punctuation.definition.tag.end.html"
			],
			"settings": {
				"foreground": "#91B3E0"
			}
		},
		{
			"name": "HTML: Tag Names",
			"scope": "entity.name.tag",
			"settings": {
				"foreground": "#4B83CD"
			}
		},
		{
			"name": "HTML: Attribute Names",
			"scope": [
				"meta.tag entity.other.attribute-name",
				"entity.other.attribute-name.html"
			],
			"settings": {
				"fontStyle": "italic",
				"foreground": "#91B3E0"
			}
		},
		{
			"name": "HTML: Entities",
			"scope": [
				"constant.character.entity",
				"punctuation.definition.entity"
			],
			"settings": {
				"foreground": "#AB6526"
			}
		},
		{
			"name": "CSS: Selectors",
			"scope": [
				"meta.selector",
				"meta.selector entity",
				"meta.selector entity punctuation",
				"entity.name.tag.css"
			],
			"settings": {
				"foreground": "#7A3E9D"
			}
		},
		{
			"name": "CSS: Property Names",
			"scope": [
				"meta.property-name",
				"support.type.property-name"
			],
			"settings": {
				"foreground": "#AB6526"
			}
		},
		{
			"name": "CSS: Property Values",
			"scope": [
				"meta.property-value",
				"meta.property-value constant.other",
				"support.constant.property-value"
			],
			"settings": {
				"foreground": "#448C27"
			}
		},
		{
			"name": "CSS: Important Keyword",
			"scope": "keyword.other.important",
			"settings": {
				"fontStyle": "bold"
			}
		},
		{
			"name": "Markup: Changed",
			"scope": "markup.changed",
			"settings": {
				"background": "#FFFFDD",
				"foreground": "#000000"
			}
		},
		{
			"name": "Markup: Deletion",
			"scope": "markup.deleted",
			"settings": {
				"background": "#FFDDDD",
				"foreground": "#000000"
			}
		},
		{
			"name": "Markup: Emphasis",
			"scope": "markup.italic",
			"settings": {
				"fontStyle": "italic"
			}
		},
		{
			"name": "Markup: Error",
			"scope": "markup.error",
			"settings": {
				"background": "#96000014",
				"foreground": "#660000"
			}
		},
		{
			"name": "Markup: Insertion",
			"scope": "markup.inserted",
			"settings": {
				"background": "#DDFFDD",
				"foreground": "#000000"
			}
		},
		{
			"name": "Markup: Link",
			"scope": "meta.link",
			"settings": {
				"foreground": "#4B83CD"
			}
		},
		{
			"name": "Markup: Output",
			"scope": [
				"markup.output",
				"markup.raw"
			],
			"settings": {
				"foreground": "#777777"
			}
		},
		{
			"name": "Markup: Prompt",
			"scope": "markup.prompt",
			"settings": {
				"foreground": "#777777"
			}
		},
		{
			"name": "Markup: Heading",
			"scope": "markup.heading",
			"settings": {
				"foreground": "#AA3731"
			}
		},
		{
			"name": "Markup: Strong",
			"scope": "markup.bold",
			"settings": {
				"fontStyle": "bold"
			}
		},
		{
			"name": "Markup: Traceback",
			"scope": "markup.traceback",
			"settings": {
				"foreground": "#660000"
			}
		},
		{
			"name": "Markup: Underline",
			"scope": "markup.underline",
			"settings": {
				"fontStyle": "underline"
			}
		},
		{
			"name": "Markup Quote",
			"scope": "markup.quote",
			"settings": {
				"foreground": "#7A3E9D"
			}
		},
		{
			"name": "Markup Lists",
			"scope": "markup.list",
			"settings": {
				"foreground": "#4B83CD"
			}
		},
		{
			"name": "Markup Styling",
			"scope": [
				"markup.bold",
				"markup.italic"
			],
			"settings": {
				"foreground": "#448C27"
			}
		},
		{
			"name": "Markup Inline",
			"scope": "markup.inline.raw",
			"settings": {
				"fontStyle": "",
				"foreground": "#AB6526"
			}
		},
		{
			"name": "Extra: Diff Range",
			"scope": [
				"meta.diff.range",
				"meta.diff.index",
				"meta.separator"
			],
			"settings": {
				"background": "#DDDDFF",
				"foreground": "#434343"
			}
		},
		{
			"name": "Extra: Diff From",
			"scope": "meta.diff.header.from-file",
			"settings": {
				"background": "#FFDDDD",
				"foreground": "#434343"
			}
		},
		{
			"name": "Extra: Diff To",
			"scope": "meta.diff.header.to-file",
			"settings": {
				"background": "#DDFFDD",
				"foreground": "#434343"
			}
		}
	]
}

到此這篇關(guān)于VSCode自定義配色方案的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)VSCode自定義配色 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:
  • VsCode插件整理(小結(jié))
  • VScode編寫第一個(gè)Python程序HelloWorld步驟
  • 詳解vscode中vue代碼顏色插件
  • VSCode下配置python調(diào)試運(yùn)行環(huán)境的方法
  • VSCode配置react開發(fā)環(huán)境的步驟
  • 如何使用VSCode愉快的寫Python于調(diào)試配置步驟
  • 在vscode中使用Git的教程
  • VSCode下好用的Python插件及配置
  • 在vscode中統(tǒng)一vue編碼風(fēng)格的方法
  • VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
  • 淺談?dòng)肰SCode寫python的正確姿勢(shì)
  • VSCode配置Git的方法步驟隨記

標(biāo)簽:許昌 汕尾 萊蕪 三沙 咸寧 棗莊 七臺(tái)河 忻州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《VSCode自定義配色方案的實(shí)現(xiàn)》,本文關(guān)鍵詞  VSCode,自定義,配色,方案,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《VSCode自定義配色方案的實(shí)現(xiàn)》相關(guān)的同類信息!
  • 本頁收集關(guān)于VSCode自定義配色方案的實(shí)現(xiàn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章