【工具使用】如何修改vscode主题为绿色护眼模式_修改vscode的主题颜色为护眼绿

一、主题自定义步骤

1、安装主题插件”Eclipse Color theme and keymaps“

2、选择主题后，按照“文件-> 首选项 -> 设置” ，搜索“workbench.colorCustomizations”，点击“在setting.json中编辑” ,加入如下配置，修改主题的背景颜色。

	"[eclipse-color-theme]": {
	    "editor.background": "#CCE8CF"
	} 
1
2
3

按照如上设置后，可以发现代码编辑区的背景已经修改为护眼颜色，但是侧边栏和活动栏并没有跟随修改为护眼颜色，还是原始的颜色，看着比较别扭，如何修改呢？
3、继续按照如下方式修改，添加activityBar.background"活动栏背景色

	"sideBar.background": "#CCE8CF",
	"activityBar.background": "#CCE8CF"
1
2

修改后，效果如下，可以发现，侧边栏和活动栏都变成了护眼色，这样看着就舒服多了（虽然菜单栏还未修改，但看着也影响不大）。

4、添加面板背景色panel.background，面板显示在编辑区域的下方，可包含输出和集成终端等视图。
效果如下：

5、添加标题栏背景色titleBar.activeBackground，修改后效果如下：

6、添加状态栏背景色statusBar.background，修改后效果如下：

7、修改活动选项卡的背景色tab.activeBackground，修改后效果如下：

8、修改普通选项卡的背景色tab.inactiveBackground，第7步修改的只针对当前打开的文件，第8步修改的是打开的其他文件
效果如下：

9、修改选项卡停靠位置的背景色editorGroupHeader.tabsBackground
效果如下：

二、settings.json文件内容

settings.json文件整体如下：

{
    "workbench.colorTheme": "eclipse-color-theme",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 1,
    "explorer.confirmDragAndDrop": false,
    "editor.minimap.enabled": false,
    "files.encoding": "gb2312",
    "cmake.showOptionsMovedNotification": false,
    "workbench.colorCustomizations": {
        "[eclipse-color-theme]": {
            "editor.background": "#CCE8CF",/*编辑区背景色*/
            "sideBar.background": "#CCE8CF",/*侧边栏背景色*/
            "activityBar.background": "#CCE8CF",/*活动栏背景色*/
            "panel.background": "#CCE8CF",/*面板背景色，面板显示在编辑器区域下*/
            "titleBar.activeBackground": "#CCE8CF",/*活动窗口标题栏背景色*/
            "statusBar.background": "#CCE8CF",/*工作区打开时状态栏的背景色*/
            "tab.activeBackground": "#CCE8CF",/*活动选项卡的背景色*/
            "tab.inactiveBackground": "#CCE8CF",/*普通选项卡背景色*/
            "editorGroupHeader.tabsBackground": "#CCE8CF",/*选项卡停靠位置的背景色*/
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三、参考链接

1、https://blog.csdn.net/dscn15848078969/article/details/107578108