VSCode更换背景为自定义图片
使用图片作为VSCode背景,有下载扩展修改的方法(感觉扩展装太多了,不想为了这个专门装一个),也可以自己手动修改一下样式文件,这里就介绍下手动修改的方法。
三步:
- 准备一张图片(my-background.jpg)放入
{vscode安装目录}\resources\app\out\vs\workbench
下 - 打开
{vscode安装目录}\resources\app\out\vs\workbench\workbench.desktop.main.css
添加以下内容并保存 - 重启vscode
body {
/* 图片大小 */
background-size: cover;
/* 图片不重复 */
background-repeat: no-repeat;
/* 图片位置 */
background-position: center;
/* 不透明度 */
opacity: 0.8;
/* 图片缩放算法 */
image-rendering: pixelated;
/* 背景图片的路径 */
background-image: url('my-backgroun.jpg');
}
似乎不能使用绝对路径了(记得之前是可以的...),所以这里把图片复制到该路径下(反正都要修改里面的css文件,多一个复制粘贴也没什么.)
本质上是图片置于了底层,通过设置表层的透明度展示出图片
效果:
写了个简单的python脚本,每次更新vscode时运行一下就可以了
import os
import time
import sys
import re
from tkinter import Tk
from tkinter.filedialog import askdirectory, askopenfilename
# ************************************************************************************************************************
# ------------------ 需要修改的内容 ---------------------------------------------------
# 1.先找到 vscode 安装目录,Code.exe 的父级目录
# 默认安装目录为:C:\Users\{用户}\AppData\Local\Programs\Microsoft VS Code
root = Tk()
root.withdraw()
vscode_install_path = askdirectory()
# vscode_install_path = r'C:\Users\su\AppData\Local\Programs\Microsoft VS Code'
print('vscode目录:', vscode_install_path)
# 2. 选择要作为背景的图片
allow_ext = [('image', '*.jpg;*.jpeg;*.webp;*.png')] # 允许的图片类型
src_img = askopenfilename(filetypes=allow_ext)
print('背景图片:', src_img)
# 3. 设置背景图片透明度
opacity = '0.9'
# ------------ 以下内容不用修改 -------------------------------------------------------
if vscode_install_path == '' or src_img == '':
print('vscode目录或图片不能为空')
sys.exit()
else:
vscode_install_path = vscode_install_path.replace('/', '\\')
src_img = src_img.replace('/', '\\')
# 图片名称
img_name = os.path.basename(src_img)
src_ext = img_name.split('.')[-1] # 源图片扩展名
# 新图片名称
new_img_name = 'image_my_background_' + '.' + src_ext
# workbench.desktop.main.css 所在路径
css_part_path = r'resources\app\out\vs\workbench'
# 当前操作的内容都在该目录下
work_dir = os.path.join(vscode_install_path, css_part_path)
# 背景图片
target_img = os.path.join(work_dir, new_img_name)
# css 文件
css_file = os.path.join(work_dir, 'workbench.desktop.main.css')
# ************************************************************************************************************************
def copy_file(src_img, target_img):
"""复制文件
Args:
src_img (str): 源文件路径
target_img (str): 目标文件路径
"""
# 1. 读取源文件内容
with open(src_img, 'rb') as f:
content = f.read()
# 2. 将内容写入目标文件
with open(target_img, 'wb') as f:
f.write(content)
print('开始设置vscode背景')
# 要添加的样式
body_css = "body{background-size: cover;background-repeat: no-repeat;background-position: center;opacity: "+opacity+";image-rendering: pixelated; background-image: url('"+new_img_name+"');}"
# 3. 将图片复制到vscode路径下并修改.css文件
if not (os.path.exists(src_img) and os.path.isfile(src_img)):
print('选择的背景图片文件不存在')
sys.exit()
# 复制背景图片
copy_file(src_img, target_img)
if not os.path.exists(target_img):
print('背景图片复制失败,请重试!')
sys.exit()
# 修改 css
with open(css_file, 'r', encoding='utf-8') as f:
content = f.read()
with open(css_file, 'w', encoding='utf-8') as f:
print(len(content))
# 替换 body 设置
rex = body_css[:94] +'.*}'
content = re.sub(rex, '', content, count=0, flags=0)
content += body_css # 这一行注释后执行一下就能去除背景图片了
print(len(content))
# 写入新的body设置
f.write(content)
print('vscode背景修改完毕,请重启vscode')