VScode美化

RESULT:EVA-初号机 配色

主题效果

1. 需要的东西

• vs code
• background 插件
• custom CSS and JS loader 插件
• 一些png素材，推荐网址：
  • https://www.vhv.rs/
  • https://anime-pictures.net/
• EVA Unit-1 Theme V2主题插件

2. 安装步骤

1. 安装vscode
2. 安装插件和主题
3. 下载好相应的png图片
4. 配置插件Custom CSS and JS loader：

将代码 "vscode_custom_css.imports": ["url"]写入setting.json文件，url为css文件的网址。

我用的css是:

https://github.com/robb0wen/synthwave-vscode/blob/master/synthwave84.css

重启vscode ,Ctrl+Shift+P,运行命令："Reload Custom CSS and JS".

5. 配置插件background
   这是我的配置代码：

    "background.useDefault": false,
    "background.styles": [
        {
            "content": "''",
            "pointer-events": "none",
            "position": "absolute",
            "z-index": "99999",
            "width": "100%",
            "height": "100%",
            // 调图片相对大小
            "background-size": "30%",
            // 调图片位置
            "background-position": "100% 100%",
            "background-repeat": "no-repeat",
            // 透明度
            "opacity": 0.70
        }
    ],
    "background.useFront": false,
    "background.loop": true,
    // ================================================
    "vscode_custom_css.imports": [
        "https://github.com/robb0wen/synthwave-vscode/blob/master/synthwave84.css"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 1
    },
    // 启用插件
    "background.enabled": true,
    // 选择图片
    "background.customImages": [
        // 变形金刚
        // "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406105813152-297347202.png"
        // 凌波丽和明日香
        "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406111032807-1859175386.png"
        // only  明日香
        // "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406111247081-844415025.png"
        // 职业装 凌波丽
        // "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406112224192-479334132.png"
        // 战斗服 凌波丽
        // "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406112317752-1916155763.png"
        // TIFA 01
        // "https://img2023.cnblogs.com/blog/2026433/202304/2026433-20230406112939903-1936578596.png"
    ],

6. 选择主题为：EVA Unit-1 Theme V2

展示

凌波丽-白色装

凌波丽和明日香

红色战斗服-明日香

蒂法(滑稽.jpg)