關(guān)于
本人是一名在校的計(jì)算機(jī)的大學(xué)生吊奢。目前是大三茉继，由于這一年的課程比較少咧叭，沒(méi)課的時(shí)間都在宿舍寫(xiě)代碼。
常用的IDE和編輯器都是以黑色為主色調(diào)的主題烁竭，就感覺(jué)還挺酷的菲茬。像是周末基本上10個(gè)小時(shí)對(duì)著電腦屏幕，眼睛確實(shí)有點(diǎn)受不了派撕∩花了幾天時(shí)間把自己用的IDE和編輯器的顏色都換成護(hù)眼色
于是乎在vs code的插件市場(chǎng)逛了半天沒(méi)有類似的護(hù)眼主題，基本以黑色為主的“酷炫”風(fēng)腥刹，于是就決定自己做一個(gè)马胧。
修改的過(guò)程中發(fā)現(xiàn)vs code的顏色自定義的程度真的非常的高，幾乎你能看到的地方顏色都可以自定義衔峰。
先放上最終效果
代碼：
"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#FFFAE8", // 標(biāo)題欄未使用的地方
"editorLineNumber.foreground": "#9F9371", //代碼行號(hào)顏色
"editor.lineHighlightBackground": "#E8DFC4", //代碼選中高亮顏色
"editor.selectionBackground": "#BCD68D",
"editor.background": "#FFFAE8",
"editorIndentGuide.background": "#cecdc2", //代碼對(duì)齊線顏色
//標(biāo)題欄顏色設(shè)置
"titleBar.activeBackground": "#fffef9",
"titleBar.inactiveBackground": "#fffef9", //失去焦點(diǎn)時(shí)titlebar顏色
//活動(dòng)欄顏色
"activityBar.background": "#FFFAE8",
"activityBar.activeBorder": "#41A863",
//選項(xiàng)卡顏色設(shè)置
"tab.activeModifiedBorder": "#41A863",
"tab.hoverBackground": "#daeace",
"tab.border": "#fffae8",
"tab.activeBackground": "#41A863",
"tab.activeForeground": "#ffffff",
"tab.inactiveBackground": "#fffae8",
"tab.inactiveForeground": "#41A863",
//側(cè)邊欄顏色設(shè)置
"sideBarSectionHeader.background": "#FFFAE8",
"sideBar.background": "#FFFAE8",
"sideBarSectionHeader.foreground": "#AB7E05",
"sideBar.border": "#d8ca9e",
"sideBar.foreground": "#46433c",
"sideBarTitle.foreground": "#46433c",
//底部狀態(tài)欄顏色設(shè)置
"statusBar.background": "#fffdf4",
//滾動(dòng)條顏色
"scrollbarSlider.background": "#cfb56a",
"scrollbarSlider.hoverBackground": "#cfb56a",
"scrollbarSlider.activeBackground": "#cfb56a",
//終端窗口面板顏色設(shè)置
"panel.background": "#fffcf3",
"panel.border": "#d8ca9e",
//彈出小窗口：選項(xiàng)設(shè)置提示窗口佩脊，源代碼補(bǔ)全窗口
"editorWidget.background": "#BCD68D", // 彈出小窗口的背景
"editorSuggestWidget.selectedBackground": "#e8dfc4", //代碼提示選中行高亮
"list.hoverBackground": "#e8dfc4", // 鼠標(biāo)所在行的顏色
"editorWidget.border": "#BCD68D", // 彈出小窗口的邊框
"list.activeSelectionBackground": "#41A863", //側(cè)邊欄選中高亮
"list.inactiveSelectionBackground": "#d8ca9e" //側(cè)邊欄選中未獲得焦點(diǎn)顏色
},
"editor.fontSize": 15,
我是模仿HBuilderX的綠柔主題做的這個(gè)vs code主題，為了達(dá)到和HBuilderX一樣的效果垫卤，我用macOS自帶的數(shù)碼測(cè)色劑一個(gè)一個(gè)去取色威彰。
關(guān)于字體顏色我是用Slack Theme主題的顏色
使用方法：
windows: control+shift+P
macOS:cmd+shift+P
選擇Open Settings（JSON）然后將代碼復(fù)制進(jìn)去
DIY
如果想要修改或自己定制自己的主題也可以，提供參數(shù)方便各位修改
| 圖 示 | 參數(shù)名 | 作用 |
|---|---|---|
| 1 | activityBar.foreground | 活動(dòng)欄前景色(例如用于圖標(biāo)) |
| 2 | activityBar.background | 活動(dòng)欄背景色 |
| 3 | sideBarSectionHeader.background | 側(cè)邊欄節(jié)標(biāo)題的背景顏色 |
| 4 | sideBar.foreground | 側(cè)邊欄前景色 |
| 5 | sideBar.background | 側(cè)邊欄背景色 |
| 6 | tab.inactiveForeground | 活動(dòng)組中非活動(dòng)選項(xiàng)卡的前景色 |
| 7 | tab.inactiveBackground | 非活動(dòng)選項(xiàng)卡的背景色 |
| 8 | tab.activeForeground | 活動(dòng)組中活動(dòng)選項(xiàng)卡的前景色 |
| 9 | tab.activeBackground | 活動(dòng)選項(xiàng)卡的背景色 |
| 10 | editorLineNumber.foreground | 編輯器行號(hào)顏色 |
| 11 | editorGutter.background | 編輯器導(dǎo)航線的背景色穴肘，導(dǎo)航線包括邊緣符號(hào)和行號(hào) |
| 12 | editor.background | 編輯器背景顏色 |
| 13 | editor.foreground | 編輯器默認(rèn)前景色 |
| 14 | editorCursor.foreground | 編輯器光標(biāo)顏色 |
| 15 | editor.lineHighlightBackground | 光標(biāo)所在行高亮文本的背景顏色 |
| 16 | editorBracketMatch.background | 匹配括號(hào)的背景色 |
| 17 | statusBar.background | 標(biāo)準(zhǔn)狀態(tài)欄背景色 |
| 17 | statusBar.noFolderBackground | 沒(méi)有打開(kāi)文件夾時(shí)狀態(tài)欄的背景色 |
| 17 | statusBar.debuggingBackground | 調(diào)試程序時(shí)狀態(tài)欄的背景色 |
| editor.findMatchBackground | 當(dāng)前搜索匹配項(xiàng)的顏色 | |
| editor.findMatchHighlightBackground | 其他搜索匹配項(xiàng)的顏色 | |
| editor.selectionBackground | 編輯器所選內(nèi)容的顏色 | |
| editor.selectionHighlightBackground | 與所選內(nèi)容具有相同內(nèi)容的區(qū)域顏色 | |
| editor.rangeHighlightBackground | 突出顯示范圍的背景顏色歇盼，例如 "Quick Open" 和“查找”功能 |
我知道護(hù)眼主題可能需求不是特別大，但是我還是希望大家能夠保護(hù)好自己的眼睛
黑色確實(shí)挺酷评抚，很有“極客”的感覺(jué)豹缀，但眼睛對(duì)程序員來(lái)說(shuō)真的很重要，外觀的炫酷遠(yuǎn)遠(yuǎn)沒(méi)有實(shí)用來(lái)的重要慨代。
