VSCode自定義配色方案的實現(xiàn)
更新時間：2020年05月07日 10:19:16 作者：garvenc
這篇文章主要介紹了VSCode自定義配色方案的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
說明
本文更新于2019-02-18，使用VSCode 1.14.1，操作系統(tǒng)為Windows。
配置文件
“文件-首選項-顏色主題”即可顯示所有可用的顏色主題，上下選擇后Enter即可。也可通過Ctrl+Shift+P輸入color theme回車后調(diào)出“首選項：顏色主題”面板。
記VSCode的安裝目錄為$RELEASE，默認的顏色主題配置文件都位于$RELEASE/resources/app/extensions目錄中。以theme-開頭的目錄即為顏色主題配置（事實上，其中有些是文件圖標主題）。除若干主題會共用一個目錄外（theme-defaults），大多數(shù)主題都是一個主題一個目錄。
每個顏色主題配置目錄包含以下文件：themes目錄、OSSREADME.json、package.json。themes目錄下通常使用.json設(shè)置具體的配色方案；OSSREADME.json描述版權(quán)等相關(guān)信息，可以忽略；package.json令VSCode讀取后能區(qū)分不同的配色方案。
下面新增一個灰色調(diào)顏色主題。在$RELEASE/resources/app/extensions目錄下新增如下目錄結(jié)構(gòu)。如果你不關(guān)心配置文件相關(guān)參數(shù)的解釋，可無需細讀后面內(nèi)容，只需將相應(yīng)的配置文本復制至配置文件中即可，但需注意文件均為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中該值均不能重復 |
| contributes -> themes -> label | 主題名，“文件-首選項-顏色主題”的列表中顯示該值 |
| contributes -> themes -> uiTheme | VSCode整體的UI主題，vs為淺色主題 |
| contributes -> themes -> path | 定義配色方案的文件名，如為相對路徑則相對于此文件 |
因配置文件內(nèi)容太長放至文末，以下說明對照配置文件內(nèi)容閱讀更易理解。
VSCode使用其以下兩個節(jié)點：
| 參數(shù)名 | 作用 |
|---|---|
| colors | VSCode各個UI組件的顏色 |
| tokenColors | 語法高亮顏色 |
colors節(jié)點的內(nèi)容直接通過鍵值對參數(shù)描述，以下列舉幾個參數(shù)的作用：
| 圖示 | 參數(shù)名 | 作用 |
|---|---|---|
| 2 | activityBar.background | 活動欄背景色 |
| 1 | activityBar.foreground | 活動欄前景色(例如用于圖標) |
| 12 | editor.background | 編輯器背景顏色 |
| 13 | editor.foreground | 編輯器默認前景色 |
| editor.findMatchBackground | 當前搜索匹配項的顏色 | |
| editor.findMatchHighlightBackground | 其他搜索匹配項的顏色 | |
| 15 | editor.lineHighlightBackground | 光標所在行高亮文本的背景顏色 |
| editor.selectionBackground | 編輯器所選內(nèi)容的顏色 | |
| editor.selectionHighlightBackground | 與所選內(nèi)容具有相同內(nèi)容的區(qū)域顏色 | |
| editor.rangeHighlightBackground | 突出顯示范圍的背景顏色，例如 "Quick Open" 和“查找”功能 | |
| 16 | editorBracketMatch.background | 匹配括號的背景色 |
| 14 | editorCursor.foreground | 編輯器光標顏色 |
| 11 | editorGutter.background | 編輯器導航線的背景色，導航線包括邊緣符號和行號 |
| 10 | editorLineNumber.foreground | 編輯器行號顏色 |
| 5 | sideBar.background | 側(cè)邊欄背景色 |
| 4 | sideBar.foreground | 側(cè)邊欄前景色 |
| 3 | sideBarSectionHeader.background | 側(cè)邊欄節(jié)標題的背景顏色 |
| 17 | statusBar.background | 標準狀態(tài)欄背景色 |
| 17 | statusBar.noFolderBackground | 沒有打開文件夾時狀態(tài)欄的背景色 |
| 17 | statusBar.debuggingBackground | 調(diào)試程序時狀態(tài)欄的背景色 |
| 9 | tab.activeBackground | 活動選項卡的背景色 |
| 8 | tab.activeForeground | 活動組中活動選項卡的前景色 |
| 7 | tab.inactiveBackground | 非活動選項卡的背景色 |
| 6 | tab.inactiveForeground | 活動組中非活動選項卡的前景色 |
tokenColors
tokenColors使用一個對象數(shù)組描述各語法高亮顏色。每個對象有如下結(jié)構(gòu)：
{
"name": "Comment",
"scope": [
"comment",
"punctuation.definition.comment"
],
"settings": {
"background": "#ffffff",
"fontStyle": "italic",
"foreground": "#000000"
}
}
| 參數(shù)名 | 作用 |
|---|---|
| name | 規(guī)則描述，一段容易理解的描述性文字 |
| scope | 作用域，指定使用那些VSCode內(nèi)部對象，其含義參看Scope Naming |
| setting -> background | 背景色，可選 |
| setting -> fontStyle | 字體，可選，為bold、italic、underline |
| setting -> foreground | 前景色，可選 |
以下列舉文末的配置文件中幾個name所指定的參數(shù)的作用：
| 參數(shù)名 | 作用 |
|---|---|
| Character | 字符 |
| Class | 類名 |
| Comment | 注釋 |
| Function | 函數(shù)名 |
| Keyword | 關(guān)鍵字 |
| Number | 數(shù)值 |
| Operator | 運算符 |
| Parameter | 函數(shù)參數(shù) |
| Punctuation | 標點符號 |
| 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自定義配色方案的實現(xiàn)的文章就介紹到這了,更多相關(guān)VSCode自定義配色 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
IntelliJ IDEA 2020如何設(shè)置背景圖片的方法步驟
這篇文章主要介紹了IntelliJ IDEA 2020如何設(shè)置背景圖片的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
VSCode 云同步擴展設(shè)置Settings Sync插件
這篇文章主要介紹了VSCode 云同步擴展設(shè)置Settings Sync插件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了快速設(shè)置IDEA代碼風格為Google風格,使用Google風格format的圖文教程，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-11-11
這篇文章主要介紹了用PyTorch部署模型的相關(guān)知識，演示了使用PyTorch最近發(fā)布的新工具torchserve來進行PyTorch模型的部署的相關(guān)知識,需要的朋友可以參考下2022-02-02
PHP VBS JS 函數(shù) 對照表,大家可以參考下。2010-03-03
FedAvg聯(lián)邦學習FedProx異質(zhì)網(wǎng)絡(luò)優(yōu)化實驗總結(jié)
這篇文章主要為大家介紹了FedAvg聯(lián)邦學習FedProx異質(zhì)網(wǎng)絡(luò)優(yōu)化的實驗總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
i++循環(huán)與i-–循環(huán)的執(zhí)行效率(遞增與遞減效率)
i++循環(huán)與i-–循環(huán)的執(zhí)行效率(遞增與遞減效率)，需要的朋友可以參考下。2011-01-01
Jenkins用Java語言編寫，可在Tomcat等流行的servlet容器中運行，也可獨立運行，這篇文章主要介紹了jenkins配置163郵箱的步驟,需要的朋友可以參考下2022-01-01
詳細講解計算機網(wǎng)絡(luò)——應(yīng)用層
這不同類型的網(wǎng)絡(luò)應(yīng)用有不同的通信規(guī)則，因此應(yīng)用層協(xié)議是多種多樣的，比如DNS、FTP、Telnet、SMTP、HTTP、RIP、NFS等協(xié)議都是用于解決其各自的一類問題2021-08-08
下面小編就為大家?guī)硪黄猤it恢復刪除的分支及內(nèi)容的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10