45人参与 • 2025-04-15 • Vue.js
本文介绍了如何以管理员身份运行vscode并安装 background插件,通过修改用户设置来定制编辑器、侧边栏、活动栏等区域的背景颜色和样式。同时,还展示了在webstorm中设置背景图片的方法,提供了详细的步骤和代码示例,帮助用户打造个性化的开发环境。
以管理员身份运行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 },
打开-“文件-设置”-background image
选择图片路径
效果如下
您想发表意见!!点此发布评论
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论