VSCode更改主题背景

问题:如何更改VSCode主题背景

客官!欢迎来到本小白的博客!

跟着我的步骤

1-1.打开VSCode,在扩展中心输入background,一般是选择第一个【注意:选择下载人数多的】。VSCode更改主题背景_第1张图片
1-2.删除刚刚输入的文字"background",找到已安装中刚刚下载的扩展background,点击该扩展的设置按钮。
打开设置

1-3.选择扩展设置。
VSCode更改主题背景_第2张图片
1-4.找到在settings.json中编辑选项【可能会有多个,随便选择一个就行,它们是同一个文件】。
VSCode更改主题背景_第3张图片
1-5.填写形式很简单
【1.注需要自定义背景,需在background.useDefault后面的true→false
【2.自定义图片路径写上图片的绝对路径】
【3.背景亮暗在opacity中修改,范围为0~1,越低越暗】
VSCode更改主题背景_第4张图片

"background.useDefault": false,
"background.customImages": [
	"file:///加上你的图片路径"
],

"background.style": { 
      
	"content": "''",
	"pointer-events": "none",
	"position": "absolute",
	"z-index": "99999",
	"width": "100%",
	"height": "100%",
	"background-size": "cover",
	"background-position": "100% 100%",
	"background-repeat": "no-repeat",
	"opacity": 0.15
},

1-6.按Ctrl+S保存文件后,右下角弹出重启的提示,选择Restart vscode,这样就可以了,最后再根据自己喜好多试几次亮暗调整,背景图片就设置好了。
VSCode更改主题背景_第5张图片
1-7.:在扩展安装的时候,如果仔细看右侧说明的话,可以发现开发人员已经给出了一些提示性信息,这些可以解决使用过程中的问题。例:
VSCode更改主题背景_第6张图片
VSCode更改主题背景_第7张图片
VSCode更改主题背景_第8张图片

---------------------------------------------------我是一条卑微的分隔线-------------------------------------------------

2-1.上面设置完之后,发现只有代码界面修改了背景,那能不能食用编译器的全局背景呢,比如下面这张图中的两块区域。答案是可以的。
VSCode更改主题背景_第9张图片

2-2.打开VSCode的安装目录下的workbench子目录,默认在【 C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench 】,选择wordbench.desktop.main.css注:最好事先准备一个文件副本,如果设置出错可以替换还原
VSCode更改主题背景_第10张图片
2-3.将文件拖入VSCode,这里会显示一大串代码,不用管它,找到下面这个位置【注:是" / "后面
VSCode更改主题背景_第11张图片
2-4.开始写入一串代码【注:这里的opacity是越高越暗的

body{background-image: url('file:///加上你的图片路径');background-size: cover;background-position: 100% 100%;background-repeat: no-repeat;opacity: 0.75;}

2-5.代码写入之后,Ctrl+S保存后重启VSCode。看,是不是已经应用到整个IDE了。

注:如果想要放在右下角,只要更改background-size: cover;改成background: 10%之类的,大小可以自己调整。

最后祝各位看官学业有成,事业蒸蒸日上!

你可能感兴趣的:(VSCode)