修改vscode源码css后自定义背景图

就是想自定义一下编辑器的背景图,开发时增加一些新鲜感,看着自己喜欢的背景,搬砖的时候能更加充满激情。然后我就去找度娘了,现在成功实现,所以特此记录一下。

方法一:使用插件进行修改

  1. 在vscode中使用ctrl+shift+x或者直接打开应用商店,搜索background并进行安装;
  2. 选择文件->首选项->设置,搜索background,点击在settings.json中编辑,添加以下代码:
    "background.enabled": true,
    "background.useDefault": false,
    "background.customImages": [
        // "file:///D:/vscode-background/1.jpg"
    ],
    "background.styles": [
        {
            "content": "",
            "pointer-events": "none",
            "position": "absolute",
            "z-index": "99999",
            "width": "100%",
            "height": "100%",
            "background-position": "center",
            "background-repeat": "no-repeat",
            "background-size": "100%,100%",
            "opacity": 0.1,
        },
     ],
  1. 重启编辑器后,可以实现,如果弹出code安装错误,请重新安装之类的弹框,则需要安装另一个插件进行修复(我还重新安装了一遍编辑器,就离谱,哈哈哈);
  2. 安装Fix VSCode Checksums, 使用ctrl+shift+p,输入Fix checksums: Apply,重启编辑器即可。

方法二:直接修改css源码

修改源码后,可以连旁边的项目目录一起修改,这个感觉很棒,nice。

直接按照目录打开D:\MicrosoftVSCode\resources\app\out\vs\workbench\workbench.desktop.main.css文件,搜索body{,差不多找到第5个的时候,直接修改代码;

body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 11px;
    user-select: none;
    pointer-events: auto !important;
    background-size: 100% !important;
    opacity: 0.8 !important;
    background-position: 0 0 !important;
    background-image: url("file:///D:/vscode-background/1.jpg") !important;
    content: "";
    position: absolute;
    z-index: 99999;
    background-repeat: no-repeat;
}

修改过后直接重启编辑器即可查看效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容