vscode护眼色_vscode护眼颜色设置

最近写代码太累，眼睛疲劳，修改写主题配色

最近这边文章本人投诉侵权啦，也无所谓啦，反正这篇文章该更新啦，现在我的vscode 配置基本大变化啦！

配置开发插件提高工作效率

插件安装参考文章大前端插件集合

tips: 为了减少系统盘的大小或者后期重装系统造成的一些插件丢失，告诉大家一个好方案，因为vscode 可以解压的方式运行，下载下来，把目录弄到非系统盘，我的在E:\install_path\VSCode，打开vacode,把上面的插件安装到vscode上

，接下来是关键以的一步，安装的插件在C:\Users\“用户”.vscode\extensions下、

，把上面的所有文件复制到 E:\install_path\VSCode\resources\app\extensions 下，重新打开，你会发现之前的插件全部变成内置啦，就算重装系统，也不会丢失。

配置主题

因为侵权问题，我现在已另外一种方式去实现，这样通过改文件的方式，
我们首先确定我们的主题文件在哪个目录下，之后修改默认的配置文件，或者自己新建一个配置文件，名字改为自己喜欢的专属名字。
主题目录在 E:\install_path\VSCode\resources\app\extensions这里会看到theme***的插件

我们看看默认的是哪个主题

那这个系统默认的主题在哪里呢？仔细找找，其实并不难找。在E:\install_path\VSCode\resources\app\extensions这个目录下有个theme-defaults的文件夹

fileicons 这个是图标的icon
themes 这个是主题文件，基本都是json格式的
打开themes 之后

dark_defaults.json 这个就是系统默认的那个主题

package.json 可以加一个自己定制的主题文件，package.json的内容

我自己新建一个主题的名字


重新启动vscode

启动vscode


把下面的代码放在配置中

"workbench.colorCustomizations": {
        "foreground": "#519657",
        "editor.background": "#c8e6c9",
        "editor.lineHighlightBackground": "#dcedc8",
        "editor.selectionBackground":"#f0f4c3",
        "editorWidget.background": "#c8e6c9",
        "editorHoverWidget.background":"#c8e6c9",
        "editorHoverWidget.border":"#a5d6a7",
        "editorLineNumber.foreground": "#a5d6a7",
        "editorWhitespace.foreground": "#a5d6a7",
        "editorIndentGuide.background": "#c8e6c9",
        "editorIndentGuide.activeBackground": "#a5d6a7",
        "editorSuggestWidget.background": "#c8e6c9",
        "editorSuggestWidget.border":"#a5d6a7",
        "editorSuggestWidget.foreground": "#338a3e",
        "editorSuggestWidget.highlightForeground": "#338a3e",
        "editorSuggestWidget.selectedBackground": "#a5d6a7",
        "activityBar.background": "#c8e6c9",
        "activityBar.foreground": "#519657",
        "activityBarBadge.background": "#519657",
        "activityBarBadge.foreground": "#FFFFFF",
        "editorLineNumber.activeForeground": "#519657",
        "input.background": "#c8e6c9",
        "input.border": "#c5e1a5",
        "focusBorder": "#c5e1a5",
        "sideBar.background": "#c8e6c9",
        "sideBarSectionHeader.background": "#c8e6c9",
        "tab.activeBackground": "#c8e6c9",
        "tab.activeForeground": "#519657",
        "tab.inactiveBackground": "#c8e6c9",
        "tab.inactiveForeground": "#97b498",
        "tab.border": "#c8e6c9",
        "badge.background": "#519657",
        "statusBar.background": "#c8e6c9",
        "statusBar.foreground": "#519657",
        "statusBarItem.hoverBackground": "#dcedc8",
        "statusBar.noFolderBackground": "#519657",
        "statusBar.debuggingBackground": "#519657",
        "statusBar.debuggingForeground": "#00701a",
        "debugToolBar.background": "#a5d6a7",
        "editorGroupHeader.tabsBackground": "#c8e6c9",
        "button.background": "#519657",
        "button.foreground": "#FFFFFF",
        "button.hoverBackground": "#519657",
        "extensionButton.prominentBackground": "#3BBA54",
        "extensionButton.prominentHoverBackground": "#4CC263",
        "scrollbar.shadow":"#a5d6a7",
        "scrollbarSlider.background":"#a5d6a7",
        "scrollbarSlider.hoverBackground":"#81c784",
        "scrollbarSlider.activeBackground":"#81c784",
        "list.activeSelectionBackground":"#dcedc8",
        "list.activeSelectionForeground":"#519657",
        "list.inactiveSelectionBackground":"#dcedc8",
        "list.inactiveSelectionForeground":"#519657",
        "list.hoverBackground":"#dcedc8",
        "list.highlightForeground":"#dcedc8",
        "gitDecoration.modifiedResourceForeground": "#00600f",
        "dropdown.background":"#c8e6c9",
        "dropdown.border":"#c5e1a5",
        "titleBar.activeBackground": "#c8e6c9",
        "titleBar.activeForeground": "#519657",
        "titleBar.inactiveBackground": "#c8e6c9",
        "titleBar.inactiveForeground": "#519657"
},
"editor.tokenColorCustomizations": {
        "comments": "#97b498",
        "strings": "#519657",
        "functions": "#7e57c2",
        "keywords": "#ab47bc",
        "variables": "#e57373",
        "textMateRules": [
            {
                "name": "Comment",
                "scope": [
                    "comment"
                ],
                "settings": {
                    "foreground": "#97b498",
                    "fontStyle": ""
                }
            },
            {
                "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
                "scope": "punctuation.definition.variable.php",
                "settings": {
                    "foreground": "#e57373"
                }
            },
        ]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

之后再详细修改，因为修改的默认主题的配置，可能有的地方显示不雅观，找打对应的配置，修改颜色值

上面只是修改默认是主题

下面修改主题的下的颜色值

"workbench.colorCustomizations": {
    "[%THEME%]": {
        "foreground": "#519657",
        "editor.background": "#c8e6c9",
        "editor.lineHighlightBackground": "#dcedc8",
        "editor.selectionBackground":"#f0f4c3",
        "editorWidget.background": "#c8e6c9",
        "editorHoverWidget.background":"#c8e6c9",
        "editorHoverWidget.border":"#a5d6a7",
        "editorLineNumber.foreground": "#a5d6a7",
        "editorWhitespace.foreground": "#a5d6a7",
        "editorIndentGuide.background": "#c8e6c9",
        "editorIndentGuide.activeBackground": "#a5d6a7",
        "editorSuggestWidget.background": "#c8e6c9",
        "editorSuggestWidget.border":"#a5d6a7",
        "editorSuggestWidget.foreground": "#338a3e",
        "editorSuggestWidget.highlightForeground": "#338a3e",
        "editorSuggestWidget.selectedBackground": "#a5d6a7",
        "activityBar.background": "#c8e6c9",
        "activityBar.foreground": "#519657",
        "activityBarBadge.background": "#519657",
        "activityBarBadge.foreground": "#FFFFFF",
        "editorLineNumber.activeForeground": "#519657",
        "input.background": "#c8e6c9",
        "input.border": "#c5e1a5",
        "focusBorder": "#c5e1a5",
        "sideBar.background": "#c8e6c9",
        "sideBarSectionHeader.background": "#c8e6c9",
        "tab.activeBackground": "#c8e6c9",
        "tab.activeForeground": "#519657",
        "tab.inactiveBackground": "#c8e6c9",
        "tab.inactiveForeground": "#97b498",
        "tab.border": "#c8e6c9",
        "badge.background": "#519657",
        "statusBar.background": "#c8e6c9",
        "statusBar.foreground": "#519657",
        "statusBarItem.hoverBackground": "#dcedc8",
        "statusBar.noFolderBackground": "#519657",
        "statusBar.debuggingBackground": "#519657",
        "statusBar.debuggingForeground": "#00701a",
        "debugToolBar.background": "#a5d6a7",
        "editorGroupHeader.tabsBackground": "#c8e6c9",
        "button.background": "#519657",
        "button.foreground": "#FFFFFF",
        "button.hoverBackground": "#519657",
        "extensionButton.prominentBackground": "#3BBA54",
        "extensionButton.prominentHoverBackground": "#4CC263",
        "scrollbar.shadow":"#a5d6a7",
        "scrollbarSlider.background":"#a5d6a7",
        "scrollbarSlider.hoverBackground":"#81c784",
        "scrollbarSlider.activeBackground":"#81c784",
        "list.activeSelectionBackground":"#dcedc8",
        "list.activeSelectionForeground":"#519657",
        "list.inactiveSelectionBackground":"#dcedc8",
        "list.inactiveSelectionForeground":"#519657",
        "list.hoverBackground":"#dcedc8",
        "list.highlightForeground":"#dcedc8",
        "gitDecoration.modifiedResourceForeground": "#00600f",
        "dropdown.background":"#c8e6c9",
        "dropdown.border":"#c5e1a5",
        "titleBar.activeBackground": "#c8e6c9",
        "titleBar.activeForeground": "#519657",
        "titleBar.inactiveBackground": "#c8e6c9",
        "titleBar.inactiveForeground": "#519657"
    },
},
"editor.tokenColorCustomizations": {
    "[%THEME%]":{
        "comments": "#97b498",
        "strings": "#519657",
        "functions": "#7e57c2",
        "keywords": "#ab47bc",
        "variables": "#e57373",
        "textMateRules": [
            {
                "name": "Comment",
                "scope": [
                    "comment"
                ],
                "settings": {
                    "foreground": "#97b498",
                    "fontStyle": ""
                }
            },
            {
                "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
                "scope": "punctuation.definition.variable.php",
                "settings": {
                    "foreground": "#e57373"
                }
            },
        ]
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

我的vscode 安装的是亮色主题Atom One Light，所以只要把上面的%THEME%修改为Atom One Light 就ok啦，是不是眼睛一亮，舒服多啦！

看到这样的主题和配置，有没有眼前一亮，保护我们的眼睛，愉快的codeing,欢迎留言评论获取本人的配置。

欢迎进入个人公众号 ，一起学习啊！