首页 > 其他分享 >VScode美化

VScode美化

时间:2023-04-07 19:44:08浏览次数:61  
标签:background 2026433 VScode 100% png https com 美化

RESULT:EVA-初号机 配色


主题效果

1. 需要的东西

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".

  1. 配置插件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": [
        // 变形金刚
        // "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406105813152-297347202.png"
        // 凌波丽和明日香
        "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406111032807-1859175386.png"
        // only  明日香
        // "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406111247081-844415025.png"
        // 职业装 凌波丽
        // "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406112224192-479334132.png"
        // 战斗服 凌波丽
        // "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406112317752-1916155763.png"
        // TIFA 01
        // "/i/l/?n=23&i=blog/2026433/202304/2026433-20230406112939903-1936578596.png"
    ],
  1. 选择主题为:EVA Unit-1 Theme V2

展示


凌波丽-白色装

凌波丽和明日香

红色战斗服-明日香

蒂法(滑稽.jpg)

标签:background,2026433,VScode,100%,png,https,com,美化
From: https://www.cnblogs.com/aksoam/p/17297177.html

相关文章

  • docker dev Environment+node16+vscode联合开发
    笔记软件在2023/4/713:33:47推送该笔记1.DockerFileFROMcentos:7.6.1810RUNmkdir-p/data/nodeWORKDIR/data/node#RUNcurlhttps://nodejs.org/dist/v16.20.0/node-v16.20.0-linux-x64.tar.gz>node-v16.20.0-linux-x64.tar.gzCOPY/env/node-v16.20.0-linux-x64.......
  • VSCode自建vue示例模板
    步骤打开File->Preferences->ConfigureUserSnippets选择NewGlobalSnippetsfile...输入名字(自定义),填入以下内容,注意修改vue.js路径{"Printtoconsole":{"prefix":"vue","body":["<scrip......
  • VSCode 工程下手动生成配置文件
    0.打开VS-Code,打开所在的工程1.首先在工程目录下新建.vscode文件夹2.按Ctrl+Shift+P,输入C/C++E,选择如图所示的项目,即自动生成配置文件。  3. 配置文件名字为:c_cpp_properties.json代码如下:1{2"configurations":[3{4"name":......
  • VSCode 新建 ssh 并配置免密登录
    #在local端VSCode点击新建ssh,输入ssh<user>@<ip>-A,修改config,点击connect#在local端cmd运行ssh-keygen-trsa#在remote端shell运行ssh-keygen-trsacd/home/lyc/.ssh/id_rsa#将loacl端id_rsa.pub的内容复制到authorized_keysvimauthorized......
  • VSCode插件Project Manager的使用方法
    1.在VSCode扩展里下载插件ProjectManager   2.点击文件,打开文件夹  3.这是你当前在vscode中打开的项目,单机回车就可以保存到项目管理  3.如果同时保存了多个项目管理文件,还可以给他们进行分组。 单击图标后编辑tags内容  4.再点击如下图标即可看......
  • vscode/PyCharm常用快捷键
    vscode1、显示所有指令:ctrl+shift+P2、查找文件:ctrl+P3、文件内搜索:ctrl+shift+F4、Debug:F55、显示/隐藏终端(Terminal):ctrl+`Pycharm1.位置互换:Alt+shift+箭头上下2.变量重构造:shift+F63.格式化代码:ctrl+alt+l4.同时加东西:一直按alt键,鼠标定......
  • vscode配置docker插件
    参考:https://zhuanlan.zhihu.com/p/530413695  ================================================  本文不对vscode、docker的安装及docker插件的安装进行讲解,本文只讲在vscode上如何配置以使docker插件正常使用。 VSCODE上安装好docker插件后会发现并不能正常使用......
  • VsCode开发工具的入门及基本使用
    (VsCode开发工具的入门及基本使用)一、VsCode介绍1.VsCode简介VisualStudioCode(简称“VSCode”)是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于MacOSX、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,可用于Windows,macOS和Lin......
  • VSCode更改插件安装位置
    1、使用–extensions-dir命令使用命令行打开VSCode,增加参数–extensions-dir插件路径这种方式存在弊端,就是命令行窗口不能关闭。当然也可以增加一个.bat文件打开编辑器。2、使用–extensions-dir命令如果不在安装目录里面创建data目录,那么vscode默认是在C:\Users\dell.vscode......
  • Github美化日记 - 又菜又爱玩
    Github美化日记-又菜又爱玩一.咱就说无论是技术大牛,或者是技术小菜,都希望有一个好看的Github首页吧!(快说你想要!![iShot_2023-04-05_18.58.32.min](https://pic.imgdb.cn/files/60499/202304051859337.png)  二.那就开始吧!1.所有的神秘皆来自一个特殊的仓库上......