VSCode，webstorm绿色护眼背景设置

vscode

以管理员身份运行VS Code，安装background插件

打开 “文件-首选项-设置” 用户设置 setting

在用户设置中输入以下代码，修改完后按Ctrl+S保存，可以自由选择输入样式

 "workbench.colorCustomizations": {
                "[Atom One Light]": {
                        "editor.background": "#b0dab6", //编辑器背景颜色
                        "sideBar.background": "#b0dab6", //侧边栏背景色。侧边栏是资源管理器和搜索等视图的容器。
                        "sideBarSectionHeader.background": "#9acea1", //侧边栏节标题的背景颜色
                        "focusBorder": "#9acea1", //焦点元素的整体边框颜色。
                        "foreground": "#519657", //左侧资源管理器文字颜色
                        "activityBar.background": "#b0dab6", //活动栏背景色。活动栏显示在最左侧或最右侧，并允许在侧边栏的视图间切换
                        "activityBar.foreground": "#519657", ///活动栏项在活动时的前景色。
                        "activityBarBadge.background": "#519657", //活动通知徽章背景色。
                        "activityBarBadge.foreground": "#FFFFFF", //活动栏项在活动时的文字颜色。
                        "terminal.background": "#b0dab6", //终端颜色
                        "tab.inactiveBackground": "#b0dab6", //非活动选项卡的背景色
                        "tab.activeBackground": "#9acea1", //活动选项卡的背景色。
                        "tab.activeForeground": "#519657", //活动组中活动选项卡的文字颜色。
                        "tab.inactiveForeground": "#97b498", //活动组中非活动选项卡的文字颜色。
                        "tab.border": "#c8e6c9", //活动组中非活动选项卡的前景色。
                        "editor.lineHighlightBackground": "#9acea1", //光标所在行高亮内容的背景颜色
                        "editor.selectionBackground": "#9acea1", //编辑器所选内容的颜色
                        "editorWidget.background": "#c8e6c9", //编辑器组件(如查找/替换)背景颜色
                        "editorHoverWidget.background": "#9acea1", //编辑器悬停提示的背景颜色
                        "editorHoverWidget.border": "#9acea1", //光标悬停时编辑器的边框颜色
                        "editorLineNumber.foreground": "#9acea1", //编辑器缩进参考线的颜色
                        "editorWhitespace.foreground": "#9acea1", //编辑器中空白字符的颜色
                        "editorIndentGuide.background": "#c8e6c9", //编辑器缩进参考线的颜色
                        "editorIndentGuide.activeBackground": "#9acea1", //编辑器活动缩进参考线的颜色。
                        "editorSuggestWidget.background": "#c8e6c9", //建议小组件的背景色
                        "editorSuggestWidget.border": "#9acea1", //建议小组件的边框颜色
                        "editorSuggestWidget.foreground": "#338a3e", //建议小组件的边框颜色
                        "editorSuggestWidget.highlightForeground": "#338a3e", //建议小组件中匹配内容的高亮颜色。
                        "editorSuggestWidget.selectedBackground": "#9acea1", //建议小组件中匹配内容的高亮颜色。
                        "editorLineNumber.activeForeground": "#519657", //编辑器活动行号的颜色
                        "input.background": "#c8e6c9", //输入框背景色。
                        "input.border": "#c8e6c9", //输入框背景色。
                        "badge.background": "#519657", //Badge 背景色。
                        "statusBar.background": "#b0dab6", //工作区打开时状态栏的背景色。状态栏显示在窗口底部。。
                        "statusBar.foreground": "#519657", //工作区打开时状态栏的文字颜色。
                        "statusBarItem.hoverBackground": "#9acea1", //悬停时的状态栏项背景色。
                        "statusBar.noFolderBackground": "#519657", //没有打开文件夹时状态栏的背景色
                        "statusBar.debuggingBackground": "#519657", //调试程序时状态栏的背景色
                        "statusBar.debuggingForeground": "#00701a", //调试程序时状态栏的文字颜色。
                        "debugToolBar.background": "#9acea1", //文字颜色
                        "editorGroupHeader.tabsBackground": "#c8e6c9", //启用选项卡时编辑器组标题的背景颜色。编辑器组是编辑器的容器。
                        "button.background": "#70af72", //按钮背景色。
                        "button.foreground": "#FFFFFF", //按钮文字颜色
                        "button.hoverBackground": "#519657", //按钮在悬停时的背景颜色
                        "extensionButton.prominentBackground": "#70af72", //扩展中突出操作的按钮背景色（比如 安装按钮）
                        "extensionButton.prominentHoverBackground": "#70af72", //扩展中突出操作的按钮被悬停时的颜色（比如 安装按钮）。
                        "scrollbar.shadow": "#81c784", //表示视图被滚动的滚动条阴影
                        "scrollbarSlider.background": "#81c784", //滚动条滑块背景色
                        "scrollbarSlider.hoverBackground": "#81c784", //滚动条滑块背景色
                        "scrollbarSlider.activeBackground": "#81c784", //滚动条滑块在被点击时的背景色
                        "list.activeSelectionBackground": "#9acea1", //已选项在列表或树活动时的背景颜色。
                        "list.activeSelectionForeground": "#519657", //已选项在列表或树活动时的文字颜色。活动的列表或树具有键盘焦点，非活动的没有。
                        "list.inactiveSelectionBackground": "#9acea1", //已选项在列表或树非活动时的背景颜色。活动的列表或树具有键盘焦点，非活动的没有。
                        "list.inactiveSelectionForeground": "#519657", //已选项在列表或树非活动时的文字颜色。活动的列表或树具有键盘焦点，非活动的没有。
                        "list.hoverBackground": "#9acea1", //已在列表或树中搜索时，其中匹配内容的高亮颜色。
                        "list.highlightForeground": "#9acea1", //在列表或树中搜索时，其中匹配内容的高亮颜色。
                        "gitDecoration.modifiedResourceForeground": "#00600f", //已修改资源的颜色。
                        "dropdown.background": "#c8e6c9", //下拉列表背景色。
                        "dropdown.border": "#9acea1", //下拉列表背景色。
                        "titleBar.activeBackground": "#b0dab6", //窗口处于活动状态时的标题栏背景色。请注意，该颜色当前仅在 macOS 上受支持。
                        "titleBar.activeForeground": "#519657", //窗口处于活动状态时的标题栏前景色。请注意，该颜色当前仅在 macOS 上受支持。
                        "titleBar.inactiveBackground": "#9acea1", //窗口处于活动状态时的标题栏文字颜色。请注意，该颜色当前仅在 macOS 上受支持。
                        "titleBar.inactiveForeground": "#519657" //窗口处于非活动状态时的标题栏文字颜色。请注意，该颜色当前仅在 macOS 上受支持
                },
        },

效果如下

单独设置编辑器背景图片

"background.customImages": [
        "file:///C:/Users/Administrator/Desktop/ba.jpg"
        ],
        "background.style": {
                "content": "''",
                "pointer-events": "none",
                "background-position": "center",
                "background-repeat": "no-repeat",
                "background-size": "100%,100%",
                "opacity": 0.4
                },

webstorm

打开-“文件-设置”-Background Image

选择图片路径

效果如下