本文首發於個人部落格 brownhu.site
我之前一直用 One Dark Pro 後來又轉到 Material Theme Palenight 再到後來的 Dracula 。總覺得有些配色很奇怪（工作太閒），於是寫了一個 VSCode 深色主題：Duang，之所以叫Duang是因為它很黑，很亮，很柔....
如果你也對編輯器有自己獨特風格的偏好，但是在成千上萬款主題中又沒有一款主題完全符合你的口味，那麼跟著下面的流程我們自己動手做一個完全符合自己風格的主題吧。
註冊你的開發者帳號和配置 token
如果你安裝過其他的 VSCode 主題的話應該知道，所有主題都屬於 VSCode外掛。那麼要開發外掛，必不可少的工具就是 vsce，這個是官方管理外掛的工具，所有外掛都通過這個工具來發布。
如果你英文夠好，建議看 VSCode 官網的這篇文章來學習從申請賬號到釋出外掛的整個流程，非常詳細。當然也可以跟著我後面的流程一起。
首先全域性安裝 vsce :
npm install -g vsce
複製程式碼之後你需要去註冊一個賬號，網址在這：Azure DevOps Services | Microsoft Azure
登陸之後，首先新建一個 public 專案:
然後獲取你的 Personal access tokens ，點選右上角的頭像，點選 Security。
為你的 token 指定一個名稱，時間的話最長到期可以設定為一年。
點選檢視所有的配置項，找到 Marketplace 並選擇 Acquire and Manage：
點選 Create ，複製生成的 token，之後就要用到我們剛才安裝的 vsce 來建立新的釋出者（publisher）
vsce create-publisher (釋出者的名字)
複製程式碼回車之後會依次提示輸入name、email，和你剛剛複製的 token。
現在你可以通過下面這個命令來登陸:
vsce login (釋出者的名字)
複製程式碼到此為止我們第一步就完成了，不要覺得繁瑣，因為這些我們只需要配置一次就好了，每次開發外掛的時候都不用重複這些操作。
如果你遇到文中沒有提到的問題，我繼續建議你看官方這兩篇文章
用腳手架生成基本的外掛程式碼
之後我們需要安裝一個腳手架工具：
npm install -g yo generator-code
複製程式碼然後執行下面的命令?，它可以在任何目錄中生成一套基本的外掛程式碼：
yo code
複製程式碼
我們要開發一個主題，所以選中 New Color Theme，之後會繼續詢問你是否新建主題還是從現有主題匯入，我們這裡選建立一個全新的。
之後還會問你一些問題：
- 外掛名字
- 識別符號
- 描述 （這個後面可以在package.json裡面改）
- 釋出者的名字 (見前文)
- 對於使用者這個外掛的名字
- 這個主題是dark還是light還是高對比度
之後就會為我們生成一套主題外掛的基本程式碼，到此為止我們已經完成了80%了，剩下的就只需要更改生成目錄 themes 下的 json 檔案就可以了，但是....
修改themes下的json檔案
看似很簡單的事情，其實是我認為最難的，因為要設計一款，好看的主題，配色真的太難了！！！
很多我以為會很好看的顏色，改進去卻like a shit....
em.....扯遠了
首先用 VSCode 開啟生成的目錄，我們看到結構如下：
之後我們的工作都會在 themes 下的 json 檔案展開，不要害怕，我們其實不需要看完這幾百上千行 json 檔案的意思。
首先我們先進去除錯模式，看看指令碼自動生成的主題是什麼樣子的：
點選除錯，會自動開啟一個新的 VSCode 視窗展示預設的主題。
接下來 Command + Shift + P 輸入 Developer: Inspect TM Scopes
現在你可以看檔案中每一個字元的顏色配置在哪了，只需要在 json 檔案裡搜對應的配置就好了。
如果你覺得不習慣，你甚至可以開啟和 Chrome 一樣的開發者工具，快捷鍵是 option + command + i
不過我還是建議你用第一種方法，因為開發者工具有時候搜到顏色，但是你找不到配置項。
配色方案
如果你現在一無所措，改了一些顏色也不盡如人意，那就看下我的配色建議：
首先我的建議是，直接抄你喜歡或者成熟主題對應的 json檔案，比如 One Dark Pro 、Material Theme Palenight、Dracula
之所以這樣是因為出於幾個考慮：
- 腳手架的配置項並不齊全，比如底部狀態列和側邊欄甚至游標的顏色都沒有，而比較成熟下載量多的主題邊邊角角都配置到了，我們拿過來把對應的顏色全域性替換就好了，不用再去官網上找對應的配置項。
- 並不是每種型別的字元配一種顏色，很多型別是複用同一種顏色的，但是對應關係並不好找，所以如果我們看到一個改一個很容易改的亂七八糟，所以拷貝過來之後每次改顏色，一定要全域性替換，不要只改一個！！！
- 因為之前可能有了喜歡的主題，只不過主題之中有一些元素不喜歡而已，這樣也會省下很多工作量。
- 你可以借鑑一些主題的顏色，或者整體風格，由於都在json檔案裡面，你可以很方便的找到它。
那麼問題來了，那些主題的 json 檔案我去哪裡找呢？
這裡有幾乎所有有名的 VSCode 主題，你可以點開看它的 github 那裡就有它們的 json 檔案，你可以clone整個專案，也可以單單隻複製 json 。
注意，不要全部複製過來，只複製 colors 和 tokenColors 就可以了。
至於顏色的選取這裡推薦幾個網站，供大家參考：