vscode护眼颜色主题推荐 VSCode和webstorm怎么设置绿色护眼背景
这篇文章小编将介绍了怎样以管理员身份运行VSCode并安装 background插件，通过修改用户设置来定制编辑器、侧边栏、活动栏等区域的背景颜色和样式。同时，还展示了在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
选择图片路径
效果如下
