vscode editor eye protection style

Vscode comes with Diablo Cool, which is pretty good, but the eyes will get tired after watching it for a long time. Here is the vs code theme that imitates the green soft theme of HBuilderX. The code is as follows.

First look at the final rendering

Insert picture description here

Setting method

windows： Ctrl + Shift + P
macOS： Command + Shift + P
Select Open Settings (JSON) and copy the code into it

Code block

{
    
    
    "window.zoomLevel": 1, //窗口.缩放级别
    "editor.tabSize": 2, //工作台主题颜色
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.formatOnSave": true, // 保存时格式化
    "breadcrumbs.enabled": false, // 开启 vscode 文件路径导航
    // "tslint.autoFixOnSave": true, // #每次保存的时候将代码按tslint格式进行修复
    "eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
    // "prettier.semi": false,//prettier 设置语句末尾不加分号
    "prettier.singleQuote": true, // prettier 设置强制单引号
    "vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化 
    "window.enableMenuBarMnemonics": false,
    "liveServer.settings.donotShowInfoMsg": true,
    // "workbench.colorTheme": "Winter is Coming (Light)", //窗口.不启用菜单栏输入法,修改主题配色
    // "workbench.colorTheme": "Visual Studio Light",
    "workbench.colorTheme": "Default Light+",
    //代码注释部分颜色
     "editor.tokenColorCustomizations": {
    
    
            "comments": "#95a3ab"
        },
    "workbench.colorCustomizations": {
    
    
        "editorGroupHeader.tabsBackground": "#FFFAE8", // 标题栏未使用的地方
        "editorLineNumber.foreground": "#9F9371", //代码行号颜色        
        "editor.lineHighlightBackground": "#E8DFC4", //代码选中高亮颜色
        "editor.selectionBackground": "#BCD68D",
        "editor.background": "#FFFAE8",
        "editorIndentGuide.background": "#cecdc2", //代码对齐线颜色
        //标题栏颜色设置
        "titleBar.activeBackground": "#fffef9",
        "titleBar.inactiveBackground": "#fffef9", //失去焦点时titlebar颜色
        //活动栏颜色
        //"activityBar.background": "#FFFAE8",          //设置这个颜色图标显示不清楚
        "activityBar.background": "#539c5f",          //最左边的活动栏背景颜色
        "activityBar.activeBorder": "#41A863",       //好像没有什么用
        //选项卡颜色设置       
        "tab.activeModifiedBorder": "#41A863",
        "tab.hoverBackground": "#daeace",
        "tab.border": "#fffae8",
        "tab.activeBackground": "#41A863",
        "tab.activeForeground": "#ffffff",
        "tab.inactiveBackground": "#fffae8",
        "tab.inactiveForeground": "#41A863",
        //侧边栏颜色设置
        "sideBarSectionHeader.background": "#FFFAE8",
        "sideBar.background": "#FFFAE8",
        "sideBarSectionHeader.foreground": "#AB7E05",
        "sideBar.border": "#d8ca9e",
        "sideBar.foreground": "#46433c",
        "sideBarTitle.foreground": "#46433c",
        //底部状态栏颜色设置
        "statusBar.background": "#fffdf4",
        //滚动条颜色
        "scrollbarSlider.background": "#cfb56a",
        "scrollbarSlider.hoverBackground": "#cfb56a",
        "scrollbarSlider.activeBackground": "#cfb56a",
        //终端窗口面板颜色设置
        "panel.background": "#fffcf3",
        "panel.border": "#d8ca9e",
        //弹出小窗口：选项设置提示窗口，源代码补全窗口
        "editorWidget.background": "#BCD68D", // 弹出小窗口的背景
        "editorSuggestWidget.selectedBackground": "#e8dfc4", //代码提示选中行高亮
        "list.hoverBackground": "#e8dfc4", // 鼠标所在行的颜色
        "editorWidget.border": "#BCD68D", // 弹出小窗口的边框
        "list.activeSelectionBackground": "#41A863", //侧边栏选中高亮
        "list.inactiveSelectionBackground": "#d8ca9e" //侧边栏选中未获得焦点颜色
       
    
    },
    "editor.fontSize": 18,
    "files.autoSave":"afterDelay",   
    "editor.wordWrap":"on",
    
}

SmartyPants

editor.rangeHighlightBackground highlights the background color of the range, such as "Quick Open" and "Find" functions

SmartyPants converts ASCII punctuation characters into "smart" printed punctuation HTML entities. E.g:

Icon	parameter name	effect
1	activityBar.foreground	The foreground color of the activity bar (for example, for icons)
2	activityBar.background	Activity bar background color
3	sideBarSectionHeader.background	The background color of the sidebar section title
4	sideBar.foreground	Sidebar foreground color
5	sideBar.background	Sidebar background color
6	tab.inactiveForeground	The foreground color of the inactive tab in the active group
7	tab.inactiveBackground	The background color of the inactive tab
8	tab.activeForeground	The foreground color of the active tab in the active group
9	tab.activeBackground	The background color of the active tab
10	editorLineNumber.foreground	Editor line number color
11	editorGutter.background	The background color of the editor navigation line, the navigation line includes edge symbols and line numbers
12	editor.background	Editor background color
13	editor.foreground	Editor default foreground color
14	editorCursor.foreground	Editor cursor color
15	editor.lineHighlightBackground	The background color of the highlighted text at the cursor line
16	editorBracketMatch.background	Match the background color of the brackets
17	statusBar.background	Standard status bar background color
17	statusBar.noFolderBackground	The background color of the status bar when the folder is not opened
17	statusBar.debuggingBackground	The background color of the status bar when debugging the program
	editor.findMatchBackground	The color of the current search match
	editor.findMatchHighlightBackground	Color of other search matches
	editor.selectionBackground	Color of editor selection
	editor.selectionHighlightBackground	The color of the area with the same content as the selected content
	editor.rangeHighlightBackground	Highlight the background color of the range, such as "Quick Open" and "Find" functions

Insert picture description here
You can customize the color according to the above parameter code.