使用 VSLook 自定義 VS Code 主題
我知道,一般來(lái)說(shuō),開發(fā)人員喜歡個(gè)性化的東西,比如把貼紙貼在他們的筆記本電腦上、汽車上、啤酒肚上,甚至是他們的孩子身上,因?yàn)槲乙彩情_發(fā)人員啊~
如果你也有這種愛好,并且也長(zhǎng)時(shí)間使用 VS Code 的話,那么我給你推薦一個(gè)擴(kuò)展 - VSLook,它允許你更改 VS Code 中所有元素的顏色,我們可以使用 VSLook 來(lái)創(chuàng)建自己的 VS Code 主題,你可以使用 Tailwind 和 Material 顏色,也可以創(chuàng)建自己的顏色。
安裝
直接前往 VS Code 插件市場(chǎng) Marketplace,地址:https://marketplace.visualstudio.com/items?itemName=sudoaugustin.vslook,安裝 VSLook 插件即可。
點(diǎn)擊 Install 按鈕打開 VS Code,跳轉(zhuǎn)到插件安裝頁(yè)面,點(diǎn)擊安裝即可。
使用
安裝后可以直接點(diǎn)擊頁(yè)面上面的 Set Color Theme 按鈕選擇 VSLook 的主題。
選擇后如果要自己編輯主題,則可以使用 Ctrl+Shift+P 按鈕打開命面板,輸入 VSLook: Edit 回車進(jìn)入主題編輯界面。
編輯界面會(huì)在 VS Code 右側(cè)打開,可編輯的主題顏色有很多組件,包括 Components、Layouts、Editors、Syntaxes 等等,每個(gè)組件下面都包含非常多的可編輯的內(nèi)容,比如文本顏色、鏈接顏色、按鈕顏色等等,我們可以根據(jù)自己的喜好。
我們可以直接選擇內(nèi)置的顏色方案,也可以從顏色選擇器創(chuàng)建顏色變量,它將與調(diào)色板合并。
但是該工具上手有點(diǎn)痛苦,因?yàn)橐牡脑O(shè)置太多了,不過(guò)該插件的開發(fā)人員已經(jīng)實(shí)現(xiàn)了一個(gè)文檔來(lái)指導(dǎo)你,地址 https://github.com/sudoaugustin/vslook/blob/main/.github/docs/styling.md ,根據(jù)該文檔我們可以來(lái)了解每個(gè)配置選項(xiàng)控制的什么區(qū)域。
比如文本相關(guān)配置的地方如下圖所示:Selection、Text、Quote、Link、Code、Error 等等。
Git 倉(cāng)庫(kù):https://github.com/sudoaugustin/vslook。