# 自製VSCode顏色主題包(color theme)

## 動機
因為預設的色彩主題包有點看膩了，再加上marketplace沒有喜歡的，而且自己又非常喜歡之前Eclipse的色彩主題包，於是決定要來開始自己設定。本來只是想要在設定那邊稍微調一下而已，但還是沒辦法做到完全相同，於是決定開始自己做

## 作法
參考自 https://www.youtube.com/watch?v=pGzssFNtWXw
### 設定
+ 1. setting
+ 2. workbemch
+ 3. appearance
+ 4. colorCustomization
> 也可以直接搜尋colorcustomization
+ 5. 打開setting.json
+ 6. 開始編輯

### 完全自製
+ 下載node.js
+ 在終端機上輸入 npm install -g generator-code
+ 輸入yo code
> 但我這當時無法執行，於是直接去安裝檔案的地方從powershell執行
+ 選取code
+ new color theme
+ no start fresh
> 檔案會出現在user\node.js的資料夾
+ 開始在VSCode編輯

為了方便編輯，我用了以下2個小技巧：
+ 為了方便編輯，我會打開debugger，以察看改了甚麼、改成了甚麼甚麼顏色

+ 為了知道要改甚麼，我會打開Developer: Inspect Editor Token and Scope
> 按ctrl+shift+p打開command panel
> 搜尋Developer: Inspect Editor Token and Scope並打開

### 語法

{
    "colors": {//主要是整個app的背景
        "editor.background": "#1E1E1E",//編輯的地方的背景
        "editor.foreground": "#eeffff",//編輯的地方的選取
        "activityBarBadge.background": "#007acc",//側邊欄位的背景顏色
        "sideBarTitle.foreground": "#bbbbbb"//
    },//一定要有逗號
    "tokenColors":[
        {
            "name": "",//這個類型的名字 隨意
            "scope":[//Developer: Inspect Editor Token and Scope上的關鍵字
                "",
                ""
            ],
            "setting":{
                "foreground": "#ffffff",//字的色彩
                "fontStyle": ""//字形
                /*
                    粗體 "bold"
                    斜體 "italic"
                    底線 "underline"
                    原始 ""
                */
            }
        },//一定要有逗號
        {
            "name":"",
            "scope":[
                ""
            ],
            "setting":{
                "foreground":"",
                "fontStyle":""
            }
        }
    ]
}

## 成品
marketplace的下載連結
> 

後端(截自6/29)
> 

程式碼
> https://github.com/zack-404/themeDemo
## 心得
經過這次，我終於能夠理解為甚麼網路上會有那麼多免費開源的程式，理由其實蠻簡單的：因為找不到符合自己需要的，於是只好自己開發一個。再者就是因為體會過找不到那些東西的感覺，所以就會免費開放；開放了又怕自己程式出錯，於是就會開源，也希望所有使用者都能夠修改它。未來希望可以支援更多語言，畢竟目前也只支援Java，因為其他的語言還沒有比較深入的研究。

這次的開發，也讓我學到許多東西，像是這促使我去了解JSON還有xml的結構，這算是我第一次接觸與前端開發的東西；為了要公開，我必須去了解怎麼使用Azure DevOps，這也是我第一次接觸這類的東西，公開發表一個產品；為了要公開更徹底，我還要去看看Github到底要怎麼用，並直接在Github上開源。

除了學到新東西，這次我也把原本學會的Java語法結構弄得更清楚了。

總之，這次我學到許多開發產品方面的一些東西，但還有很多還沒學，畢竟我還只是做一個小小外掛主題，但收穫真的蠻多的。

未來希望在接觸更多語言後，可以把這個主題外掛做的更完善。像是支援C、C++、Python、markdown、JSON...還有很多我可能會用到的。還有將marketplace的簡介，做得更詳細一點，像是加入截圖或Github的連結。

## 參考資料
外掛開發
+ https://www.youtube.com/watch?v=pGzssFNtWXw&t=805s
+ https://www.youtube.com/watch?v=Su-cNLe0dgw&t=1012s
+ https://www.youtube.com/watch?v=QCqWzb-9Sy8&t=118s

json xml簡介
+ https://www.youtube.com/watch?v=iJLMKzRmRNA&t=262s
+ https://www.youtube.com/watch?v=M2GOrdxYm9M
+ https://www.youtube.com/watch?v=t7TSFImLa0U

色彩參考
+ http://www.eclipsecolorthemes.org/?view=theme&id=48678

VsCode api
+ https://code.visualstudio.com/api

公開步驟
+ https://docs.microsoft.com/en-us/visualstudio/extensibility/walkthrough-publishing-a-visual-studio-extension?view=vs-2019

401錯誤
+ https://github.com/microsoft/vscode-docs/issues/49

## 內容
原文
+ https://hackmd.io/@zack-404/darkestTheme

主題
+ [darkest.darkest-dark-theme](https://marketplace.visualstudio.com/items?itemName=darkest.darkest-dark-theme&ssr=false#review-details)