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

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

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

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

JSON

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

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

JSON

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

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

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

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

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

VS Code 自動(dòng)補(bǔ)全列表提供了所有可以修改的顏色，而如果你希望對此有個(gè)全的了解再進(jìn)行書寫，你也可以閱讀官方文檔。