VSCode 自定义护眼主题

2,557 阅读2分钟

工作中一直会用到VSCode作为生产力工具,但是目前能看到的主题插件都是比较炫酷极客的,看久了眼睛就会有点累,再加上最近眼睛状态有点不好,所以给自己的VSCode弄出了比较护眼的主题,做个记录吧。

效果如下,护眼的豆沙绿色

1. VSCode 插件市场 安装 Atom One Light Theme 主题插件

护眼主题是在Atom One Light Theme的基础上进行设置的

2. 在settings.json 文件 设置以下内容

"workbench.colorCustomizations": {
        "[Atom One Light]": {
            "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.border": "#AFCFB7",
            "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": "#a5d6a7", //选项卡背景色
            "tab.inactiveForeground": "#97b498",
            "tab.border": "#a5d6a7",   //tab border
            "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": "#a5d6a7",//tab背景色
            "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": "#a5d6a7", //标题栏背景色
            // "titleBar.border": "#AFCFB7",
            "titleBar.activeForeground": "#519657",
            "titleBar.inactiveBackground": "#c8e6c9",
            "titleBar.inactiveForeground": "#519657"
        },
    },
    "editor.tokenColorCustomizations": {
        "[Atom One Light]":{
            "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"
                    }
                }
            ]
        }
    }

OK!比较护眼的主题就做出来了,大家可以在此基础上增加自己的想法哦