VSCode更换背景为自定义图片

使用图片作为VSCode背景,有下载扩展修改的方法(感觉扩展装太多了,不想为了这个专门装一个),也可以自己手动修改一下样式文件,这里就介绍下手动修改的方法。

三步:

  1. 准备一张图片(my-background.jpg)放入 {vscode安装目录}\resources\app\out\vs\workbench
  2. 打开 {vscode安装目录}\resources\app\out\vs\workbench\workbench.desktop.main.css 添加以下内容并保存
  3. 重启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')

        
posted @ 2022-08-10 16:06  Fission0102  阅读(923)  评论(0编辑  收藏  举报