修改vscode背景

断下句号

已于 2022-05-18 17:04:52 修改

阅读量268

点赞数

文章标签： vscode css

于 2021-03-23 09:52:54 首次发布

本文链接：https://blog.csdn.net/qq_43638408/article/details/115110200

版权

本文指导如何修改Visual Studio Code（VSCode）的背景，包括查找工作目录、添加图片和编辑workbench.desktop.main.css文件，最后重启VSCode以应用更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、点击鼠标右键打开vscode文件所在位置

在这里插入图片描述

2、找到Microsoft VS Code\resources\app\out\vs\workbench目录，添加图片到此目录

在这里插入图片描述

3、在workbench.desktop.main.css最后加上以下代码：

body {
  background: url("./GEM.PNG") !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: 100% 100% !important;
  opacity: 0.9 !important;
}

4、重启vscode！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

断下句号

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

在VScode中设置背景色

DpgrMl的博客

09-26

6069

您可以从列表中选择一个主题，也可以单击“打开文件”图标，从本地文件系统中选择一个主题文件（.json）。如果您想要使用自定义的背景色，请单击下拉菜单末尾的“更改背景色”链接，这将打开一个颜色选择器。因此，在您的VScode中，您可能会看到不同的设置选项和主题名称。在“设置”面板中，您将看到一个搜索框。一旦选择了一个主题，您将在“设置”面板中看到该主题的设置选项。在VScode中，单击左侧的“文件”菜单，然后选择“首选项”>“设置”。完成背景色的调整后，单击“设置”面板右上角的“保存”按钮，以保存您的设置。

VSCode如何更换背景图片

weixin_53350466的博客

12-11

1万+

VSCode如何更换背景图片详细教程附上代码

参与评论您还未登录，请先登录后发表或查看评论

【VSCode】设置背景图片

DX390609的博客

07-11

3122

6.切换主题颜色：设置→颜色主题→通过上下键选择自己喜欢的主题颜色。4.将原代码注释后，加入以下代码。5.保存后重启 VSCode 即可。

vscode自定义背景色

最新发布

03-12

675

故事背景,vscode默认的是黑色，windows默认的是白色，白色看久了，看黑色看不清楚。以前写C++灰色习惯了。"editor.background": "#C0C0C0", // 银灰色的十六进制代码。"activityBar.background": "#C0C0C0" // 活动栏背景色。"statusBar.background": "#C0C0C0", // 状态栏背景色。"sideBar.background": "#C0C0C0", // 侧边栏背景色。按下 Ctrl + , 打开设置。

VSCode 如何设置背景图片

xiaowude_boke的博客

11-01

7902

VSCode 设置背景图片

VScode设置背景

Mole‘Home的博客

06-12

512

"background.useDefault": false, "background.customImages": [ "file:///D:/laragon/bin/cmder/1.jpg" ], "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99

更换vscode背景图片的方法

m0_52972784的博客

09-18

1657

自定义vscode背景

keil MDK V4 V5实现vscode背景黑色背景色保护眼睛设置深色背景色

04-29

keil MDK V4,V5实现深色背景，保护眼睛，保护色，仿VScode风格，自行配置，操作简单，下载文件直接替换就可以，先备份原文件再替换哦

把黑神话悟空视频设置为vscode背景，真的太炫酷了。

fudebao的博客

08-27

952

最近黑神话悟空比较火，宣传视频也非常炫酷，于是我写了一个vscode插件，把黑神话悟空宣传视频当前vscode背景，效果真的太炫酷了。

三步教你使用vscode背景图的插件，让写代码不再单调。

前端程序猿的博客

12-28

3995

vscode背景图插件

Mac Pro M1 VSCode设置背景图

m0_38082271的博客

03-17

907

Mac Pro M1 VSCode设置背景图

wallpaper-setting:将图像设置为VSCode背景的扩展

04-10

墙纸设置将图像设置为VSCode背景。用法按“⇧⌘P”调出命令面板并输入“墙纸设置” 从菜单中选择所需的设置实施时间表仅重新配置一些设置保留最近设置的内容幻灯片的随机播放*由于缺乏技巧，可能无法执行。中断模式*可能由于缺少而无法完成（ry 显示时间*可能未做完（ry

mac环境下vscode添加背景图片

bafengcha5874的博客

11-29

3489

一：安装background插件二：在mac版本的vsCode中依次选中Code->首选项->设置；然后在settings中选中三：在右侧的“用户设置”的括号中加上以下代码： "backgroung.enable":true, "background.useDefault":false, "background.customImage...

python背景怎么自定义_VSCode自定义背景

weixin_39959615的博客

12-03

309

VSCode对于开发人员来说是一款插件最丰富的集成开发工具，VSCode开发工具设置自定义背景图片插件教程Visual Studio Code设置自定义背景图片1、在VS Code扩展中搜索 background ，就能找到如图这个插件点击下载2、之后打开文件 ->首选项 ->设置3、在设置中找到常用设置，找到如下图的框选的settings.json/也可以设置搜索中搜索 Associ...

Vscode设置背景图片

weixin_44875693的博客

03-31

882

Vscode设置背景图片，和图片的透明度。

vscode 设置背景图片

热门推荐

qq_18841761的博客

08-28

1万+

第1步，快捷键Ctrl+Shift+x，打开扩展商店搜索 background并安装第二步，文件 - 首选项 -设置，然后输入background，如下图，点击"在settings.json中编辑" 第3步，把下面的代码复制进去，随便位置就可以 "background.style": { "content": "''", "pointer-events": "none", "position": "absolut...

vscode设置背景图片

aiyouer0191的博客

07-11

738

最近在知乎上看见有人设置了vscode编辑器的背景图片，觉得很新鲜，就尝试以一下，倒是成功了。 1.首先在vscode扩展中，找到background这个插件，快捷键Ctrl+shift+x 2.完成第一步就已经有默认背景了，可是想设置自己喜欢的怎么办？往下看打开文件>首选项>设置在右侧设置里 "background.enabled": true,...

VSCode设置背景图

Jermyo的博客

07-22

2588

两种方式：一个是根据官方配置来改，只能覆盖半边背景；另一个就是暴力流直接改编辑器的样式文件就好了，可以任意位置改方式一，官方配置 1.首先在vscode扩展中，找到background这个插件 2.完成第一步就已经有默认背景了，可是想设置自己喜欢的怎么办？往下看打开文件>首选项>设置 /** 编辑器背景 */ "window.titleBarStyle": "custom", //首先把标题栏改为非原生的 "background.enabled": true,

VScode设置背景图片

m0_68956554的博客

04-03

740

【代码】VScode设置背景图片。

vscode背景

03-08

### 自定义 VSCode 编辑器背景颜色或图片 #### 使用扩展程序设置背景图片为了在 Visual Studio Code 中设置自定义背景图片，安装名为 `background` 的扩展程序是一个有效的方法[^1]。此扩展允许用户通过简单的配置来更改编辑器的外观。安装完成后，在本地计算机上选择一张想要作为背景的图像，并记录其路径。例如： ```plaintext file:///D:BaiduNetdiskDownload/vscodeBackground/chu.gif ``` 接着打开全局或工作区级别的 `settings.json` 文件，添加如下 JSON 配置项以指定背景图片的位置以及透明度等参数: ```json { "background.useDefault": false, "background.customImages": [ { "filePath": "file:///D:BaiduNetdiskDownload/vscodeBackground/chu.gif", "opacity": 0.5, "sizeType": "contain" } ] } ``` 上述代码片段中的 `"filePath"` 应该被替换成实际使用的壁纸文件位置；而 `"opacity"` 和 `"sizeType"` 参数则用于调整显示效果[^2]。 #### 修改背景颜色而不使用额外插件如果只是希望改变整个界面的颜色方案而不是具体的墙纸，则不需要依赖任何第三方扩展就可以完成操作。只需编辑相同的 `settings.json` 文件，增加关于色彩定制化的部分： ```json { "workbench.colorTheme": "Visual Studio Dark", "workbench.colorCustomizations": { "editor.background": "#F0F0F0" // 设置为浅灰色背景色 } } ``` 这段配置会将编辑区域内的默认深黑色改为更明亮友好的色调。当然也可以根据个人喜好挑选其他十六进制颜色码来代替示例中的 `#F0F0F0` 值[^3]。 #### 调整集成终端样式对于那些经常使用内置终端功能的人来说，还可以进一步优化命令行窗口的表现形式。这同样涉及到对 `settings.json` 进行适当补充： ```json { "workbench.colorCustomizations": { "terminal.background": "#181818", // 终端背景颜色 "terminal.foreground": "#26e045", // 终端字体颜色 "terminalCursor.background": "#D8D8D8",// 终端光标背景颜色 "terminalCursor.foreground": "#D8D8D8",// 终端光标前景颜色 "terminal.integrated.fontSize": 14 // 字体大小 } } ``` 以上就是针对不同需求下如何个性化设置 VSCode 外观的一些指导建议。记得每次修改完配置之后都要重新启动应用程序以便使改动生效。