vsocde主题定制和护眼色配置

70 阅读5分钟

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

主题.png

最近这边文章本人投诉侵权啦,也无所谓啦,反正这篇文章该更新啦,现在我的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"
                }
            },
        ]
},

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

上面只是修改默认是主题

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

"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啦,是不是眼睛一亮,舒服多啦!

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