vscode 修改工作區(qū)配色

持久化 UI 視圖設(shè)置是 VS Code 定制的第一步，而第二步就是修改工作區(qū)里各個視圖的配色了。相信你早就在插件市場下載過各種主題然后使用了，但其實自己修改主題顏色也非常簡單，甚至不要求你有任何的編程知識。

首先，運行命令 “打開設(shè)置（JSON）”去打開個人設(shè)置。然后你在編輯器里輸入 “workbench.colorCustomizations”，這時候，VS Code 的自動補全就會給你兩個提示項了，第一個是：

{
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}

JSON

第二個是 {} 。當(dāng)你選擇第一個提示項，此時這個配置是這樣的：

"workbench.colorCustomizations": {
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}

JSON

workbench.colorCustomizations 有很多屬性，它們的鍵（key）就是代表著各個組件的屬性，在示例里，它們是：

• statusBar.background，狀態(tài)欄背景色
• panel.background，面板背景色
• sideBar.background，側(cè)邊欄背景色

而它們的值則是顏色的 HEX 值。此時當(dāng)你保存文件后，你會發(fā)現(xiàn) VS Code 發(fā)生了變化。

沒錯，上面提到的這三個組件的背景色都立刻發(fā)生了變化。而你在設(shè)置里添加的這三組鍵值（key-value pair），跟主題插件里的書寫方式一模一樣。

已經(jīng)知道了去哪里書寫這些顏色配置，下面就是要知道有哪些可以修改的值了。最簡單的方式當(dāng)然是通過自動補全。

VS Code 自動補全列表提供了所有可以修改的顏色，而如果你希望對此有個全的了解再進行書寫，你也可以閱讀官方文檔。