碼上快樂

相關內容    簡體    繁體

VSCode自定義配色方案

本文轉載自   查看原文   2017-07-25 20:53   81490    vscode

說明

本文更新於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.json、package.json。themes目錄下通常使用.json設置具體的配色方案；OSSREADME.json描述版權等相關信息，可以忽略；package.json令VSCode讀取后能區分不同的配色方案。

下面新增一個灰色調顏色主題。在$RELEASE/resources/app/extensions目錄下新增如下目錄結構。如果你不關心配置文件相關參數的解釋，可無需細讀后面內容，只需將相應的配置文本復制至配置文件中即可，但需注意文件均為UTF-8編碼。

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

預覽圖

預覽圖

package.json

package.json文件內容如下：

{
	"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"
			}
		]
	}
}
參數名 作用
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使用一個對象數組描述各語法高亮顏色。每個對象有如下結構：

{
	"name": "Comment",
	"scope": [
		"comment",
		"punctuation.definition.comment"
	],
	"settings": {
		"background": "#ffffff",
		"fontStyle": "italic",
		"foreground": "#000000"
	}
}
參數名 作用
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 變量名

文件內容

{
	"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"
			}
		}
	]
}


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 sublime3 自定義 修改 顏色主題 配色方案 Sublime Text的自定義配色方案神器 [原]globalmapper設置高程配色（globalmapper自定義配色方案） 解決Myeclipse中導入自定義的配色方案后，JSP中的js代碼塊為白色背景的問題 VSCode設置Markdown自定義補全 vscode自定義vue模板代碼 vscode自定義背景顏色 vscode怎么自定義html模版 VScode中的自定義模板 添加vscode自定義代碼塊
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM