添加背景

为VScode添加背景

作为一个小二次元，使用vscode时间久了看着纯色的背景总觉得不舒服，这天刚好在b站刷到视频全网首发VSCode主打渐变色主题！超级好看！哔哩哔哩_bilibili ，没有被该视频的渐变色吸引，反而是评论区的一个使用background插件的b友发了个他的截图，成功吸引到了我的目光，于是就在自己的电脑上操作了一下。

操作

配置过程非常简单，直接看vscode-background 这个仓库的说明文档即可。
当然首先搜索background插件并安装，安装完成之后点开vscode的设置，搜索background，点击Edit in settings.json，之后在"background.customImages"里添加图片地址即可，如下所示:

"background.customImages": [
   "file:///C:/Users/你的用户名/Pictures/图片1.jpg",
   "file:///D:/Work/图片2.png"
 ]

当然也支持网络图片
fullscreen, Sidebar, Panel Section都可以设置，如下:

"background.fullscreen": {
    // 本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址
    "images": ["file:///E:/Tools/browsers/chrome/thumb-1920-1374531.jpg"],
    "opacity": 0.1,
    "size": "cover",
    "position": "center",
    "interval": 0,
    "random": false
},

但我找不到太合适的图片，选了张芙莉莲的 :D

插件的CSS实现原理

VS Code基于Electron开发，界面渲染依赖CSS。background插件通过动态注入CSS代码实现背景修改，比如：

body {
  background-image: url('图片路径');
  background-size: cover;
  opacity: 0.15;
}

当然还有其他的插件，比如background-cover Custom CSS and JS Loader

为Obsidian添加背景

修改完vscode的背景后，我把目光瞄向了Obsidian，由于我使用的是Blue Topaz主题，所以背景修改起来非常简单. 我使用的是style Settings插件
在其中Blue Topaz Theme的Background images中，我只选择了Workplace，之后插入所需要的图片的url即可。我使用的是原画集里的一张芙莉莲。

效果如下：

参考

• shalldie/vscode-background: Bring background images to your vscode. vscode background 背景扩展插件。
• VSCode——修改VSCode背景图片
• ProudBenzene/Blue-Topaz-Legacy
• mgmeyers/obsidian-style-settings