it编程 > 前端脚本 > Vue.js

VSCode和webstorm怎么设置绿色护眼背景? 绿豆沙背景色的设置方法

45人参与 2025-04-15 Vue.js

本文介绍了如何以管理员身份运行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

选择图片路径

效果如下

(0)

您想发表意见!!点此发布评论

推荐阅读

WebStorm如何调试Vue项目? webstorm配置vue开发环境指南

04-15

WebStorm常用插件以及实用设置分享

04-15

如何安装配置WebStorm? WebStorm安装与使用全方位指南

04-15

Webstorm怎么配置? Webstorm入门之软件配置教程

04-15

Vue项目中vue.config.js常用配置项详解

04-24

Vue3+elementPlus中 树形控件封装的实现

04-24

猜你喜欢

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论