设置 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"
                }
            },
        ]
},

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

上面只是修改默认是主题

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

"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"
                }
            },
        ]
    }
},

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

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