你有沒有想過創建一款屬于自己的VSCode主題？沒有你想像的那么難，但是真正實現起來也不是那么輕松，需要你對將要去改變的主題的一些屬性要有所了解和準備。

如果你要想讓你的主題適用于多種編程語言，并且看起來還很漂亮的話，需要對很多的顏色進行重新定義。

下面就簡單的介紹實現一款主題的過程，一些原理進行講解。

生成主題文件

我們將使用VSCode拓展生成器生成我們的主題文件，該工具是由微軟官方為插件和主題而打造。

你可以通過以下命令：

npm?install?-g?yo?generator-code

然后生成主題文件

yo?code

下面進入互動式安裝過程，一步一步引導你完成一個主題模板的創建。

最后生成了一個以主題命名的目錄，接著用VSCode打開該目錄，進行主題的編輯。

cd?my-theme code?.

新生成的主題項目已經為你初始化好了所有的東西。在主題目錄里面你可以找到一個以主題命名的JSON文件，這個JSON文件包含一些默認顏色的定義，可以直接去修改它。

開發主題

在主題的開發調試階段，我們最好是進入debug模式（按F5），會打開一個新的VSCode窗口，這個窗口就已經是使用你創建的主題了。

當你編輯主題文件themes/my-theme.json，你將會看到調試的窗口會立刻響應，期間可能會遇到不立馬生效的情況，很好解決，在菜單欄點擊Run > Restart Debugging。

調試的過程是很繁瑣的，還需要有一定的審美才行，有一定的顏色搭配能力。

為主題修改UI樣式

以下是我為這款主題定義的一些顏色示例

編輯區域

編輯區域就是你日常編輯代碼的地方

????"editor.background":?"#1B1929","editor.lineHighlightBackground":?"#8076C222","editorCursor.foreground":?"#988de4",

對于編輯區我定義了background，lineHighlightBackground和editorCursor.foreground的值，分別代表了編輯區背景顏色，鼠標所在行高亮顏色和光標顏色。

活動欄

VSCode窗口左側即為活動欄，用來切換不同功能視圖的。

????"activityBar.background":?"#13111d","activityBar.inactiveForeground":?"#323b50","activityBar.foreground":?"#5c6e92","activityBarBadge.background":?"#8076C2",

活動欄我們為它定義了background、inactiveForeground、和activityBarBadge.background的值。foreground的值表示的是圖標的顏色，而activityBarBadge則是圖標所在角標的顏色。

側邊欄

側邊欄即為打開的項目文件列表區域，或者調試工具等等，這個取決于你當前選擇的功能。

????"sideBar.background":?"#1B1929","sideBarTitle.foreground":?"#bbbbbb","sideBarSectionHeader.background":?"#242c3f",

這些定義側邊欄一些基礎的顏色。另外的內容部分需要單獨定義，包含：

????"list.activeSelectionBackground":?"#2a273f","list.activeSelectionForeground":?"#8076C2","list.inactiveSelectionBackground":?"#2a273f","list.inactiveSelectionForeground":?"#8076C2","list.highlightForeground":?"#8076C2","list.hoverBackground":?"#1f2636",

以上這些定義了當前打開的文件列表所在不同狀態下的顏色值，這里的?active?不取決于VSCode窗口是否處于活動狀態。相同的list顏色也適用于其他地方的列表。

按鈕

VSCode上面按鈕不多，我們也給它定義一下顏色，保證主題視覺上的一致性。

????"button.background":?"#8076C2","button.hoverBackground":?"#8076C299",

以上定義了按鈕的兩種狀態下的顏色，正常狀態和鼠標懸浮狀態

狀態欄

狀態欄處于VSCode窗口的底部，由于你所安裝的拓展和配置不同，顯示的內容也有所不同，包括git所在分支，文件的編碼等等。

????"statusBar.border":?"#1B1929","statusBar.background":?"#13111d","statusBar.debuggingBackground":?"#bb0000",

狀態欄我選擇了和活動欄一致的顏色，我希望狀態欄有一個比較特別的顏色，當我們調試的時候不會錯過它上面的信息。

標題欄

同樣，標題欄的顏色和狀態欄、活動欄保持一致。

????"titleBar.activeBackground":?"#13111d","titleBar.inactiveBackground":?"#13111d","titleBar.inactiveForeground":?"#5c6e92",

語法高亮

受到我最喜歡的一款主題Night Owl的影響，我開始不怎么關注語法高亮部分的顏色。高亮在主題JSON文件中tokenColor部分有所定義，tokenColor是一個數組，分別定義了一定范圍內的代碼scope，fontStyle和foreground部分樣式

{"name":?"Comment","scope":?["comment",?"punctuation.definition.comment"],"settings":?{"fontStyle":?"italic","foreground":?"#637777"} }

范圍指定可以由VSCode內部工具Inspect Editor Tokens and Scopes來發現，你可以通過組合鍵Cmd+Shift+P打開它或者搜索"inspect editor"

調色板

為了達到對JavaScript和TypeScript代碼一定程度的滿意效果，我參考了其它的一些主題。

畢竟這部分的工作是很要耐心的，你可以通過debug模式來查看當前代碼區域不同地方的顏色值然后來編輯替換它。

最后我為調色板選了11種顏色以及React項目中JavaScript和TypeScript代碼的高亮。

下面是更改了部分顏色的效果

如果你想創建一個自己滿意的主題，可以參考以上的步驟，但是最終的效果依照你自己的愛好而定，另外下面的資源也可以供參考：

Sarah Drasner article Creating a VS Code Theme^[1]

VS Code documentation on Theme Colors^[2]

References

[1]?Sarah Drasner article Creating a VS Code Theme:?https://css-tricks.com/creating-a-vs-code-theme/
[2]?VS Code documentation on Theme Colors:?https://code.visualstudio.com/api/references/theme-color

總結

以上是生活随笔為你收集整理的教你如何创建一款属于自己的VSCode主题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。