vscode 编辑器护眼样式_vscode主题(仿hbuilderx绿柔

vscode自带暗黑炫酷是挺好看的，但是看久了眼睛会疲劳，这里模仿HBuilderX的绿柔主题做的这个vs code主题，代码如下。

先看最终效果图

设置方法

• windows： Ctrl + Shift + P
• macOS： Command + Shift + P
• 选择Open Settings（JSON）然后将代码复制进去

代码块

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

SmartyPants

editor.rangeHighlightBackground 突出显示范围的背景颜色，例如 “Quick Open” 和“查找”功能

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

大家可以根据以上参数代码自定义颜色。