SoftHub关联区 - VSCode修改编辑器(代码窗口)背景色[zt加原创]

您的位置：首页 >> SoftHub关联区 >> 主题: VSCode修改编辑器(代码窗口)背景色[zt加原创] [回主站] [分站链接]

您的位置：首页 >> SoftHub关联区 >> 主题: VSCode修改编辑器(代码窗口)背景色[zt加原创] [最新] [回主站]

VSCode修改编辑器(代码窗口)背景色[zt加原创]

clq

浏览(271) - 2018-08-07 09:41:05 发表编辑

关键字: vscode

[2020-12-20 17:22:14 最后更新]
VSCode修改编辑器(代码窗口)背景色[zt加原创]

其实就是修改两个背景参数颜色而已
"sideBar.background":"#000000", "editor.background":"#000000"

其中“sideBar.background 侧边栏背景色”。
另外，主题文件会在程序安装目录下和扩展下载路径中都有。下载后的路径类似于 C:\Users\Administrator\.vscode\extensions

https://blog.csdn.net/bealei/article/details/109821931

先看参考文章
https://blog.csdn.net/u013506207/article/details/80529858
--------------------------------------------------

VSCode修改编辑器(代码窗口)背景色
2018年05月31日 20:45:50
阅读数：2039

VSCode 的背景色是放在主题里面定义的，所以在vscode的设置中无法修改到编辑器也就是代码窗口的背景色，对应想要自定义编辑器背景的同志们来说，可以通过修改主题文件来实现，操作起来也并不复杂：

参考：https://www.cnblogs.com/garvenc/p/vscode_customize_color_theme.html

操作

如果你的VSCode使用的是自带的主题，可以直接到VSCode的安装目录下找到：\resources\app\extensions这个目录，该目录下以theme-开头的文件夹表示其是主题文件夹，按照自己当前使用的主题名称去找到对应的文件夹进去修改即可，在上面给出的参考链接中已有比较详细的说明。本文主要针对在这个目录下找不到的当前所使用主题的文件夹如何修改背景色。

如果找不到你当前所使用的主题的文件有可能和我一样是使用的绿色版(解压版)的VSCode，当然安装版如果找不到也可以按这个方法试一试。
步骤

我所使用的主题是 Brackets Light Pro：
Brackets Light Pro

在你的用户目录下：通常是C:\Users[你的用户名].vscode\extensions存放你从vscode的插件库中下载的第三方插件，当然，主题也会在这里啦，所以找到你这个目录下包含有你当前主题名称的文件夹就是等下要修改的主题文件夹了。

我这里的文件夹名称是：eryouhao.brackets-light-pro-0.3.3，进入这个文件夹下面的themes文件夹，找到Brackets Light Pro-color-theme.json这么一个文件，用记事本打开，修改editor.background对应的值就好了：
目录

editor.background

修改完了之后重启下vscode就可以看到效果了~~~

clq 2018-08-07 09:47:55 发表编辑

我自己改的就有好几个地方，首先我是安装版本。

安装目录在 D:\Microsoft VS Code

编辑器的皮肤目录就在 D:\Microsoft VS Code\resources\app\extensions\ 其实里面有很多内容。

实际上默认黑色皮肤的内容因为互相包括的原因分散在好几个文件中。我的是

D:\Microsoft VS Code\resources\app\extensions\theme-defaults\themes\dark_defaults.json

还有几个，不太记得了大家自己试试。

clq 2018-08-07 09:50:14 发表编辑

我修改的目的是将背景弄成真正的黑色，因为默认的黑色背景其实是深灰，修改后的内容如下（同时修改了状态栏的颜色）

{
    "$schema": "vscode://schemas/color-theme",
    "name": "Dark Default Colors",
    "colors": {
        "editor.background": "#000000",
        "editor.foreground": "#D4D4D4",
        "editor.inactiveSelectionBackground": "#3A3D41",
        "editorIndentGuide.background": "#404040",
        "editorIndentGuide.activeBackground": "#707070",
        "editor.selectionHighlightBackground": "#ADD6FF26",
        "list.dropBackground": "#383B3D",
        "activityBarBadge.background": "#007ACC",
        "statusBar.background": "#111111",
        "statusBar.noFolderBackground": "#111111",
        "sideBarTitle.foreground": "#BBBBBB"

    }
}

clq 2018-08-07 09:52:07 发表编辑

[图片]

修改对比图如下

clq 2018-08-07 09:55:35 发表编辑

之所以没有新建一个自己的 theme 也是因为相互引用太啰嗦，其实是可以放到一个文件中的，不过实在不想研究太多细节，达到目的就好。

clq 2018-08-07 10:10:57 发表编辑

增加皮肤可以在

D:\Microsoft VS Code\resources\app\extensions\theme-defaults\package.json

文件中加一个配置目录。

文件弄好后可在点击“文件”——“首选项”——“颜色主题” 选择即可。

clq 2018-08-14 09:45:04 发表编辑

不过这在 vscode 升级时很容易会被再修改，发现一个比较好的方法是直接写在用户配置中，以下是我目前的完整用户配置

{
    "files.associations": {
        "*.php": "html"
    }
    "editor.minimap.enabled": false,

      // 控制编辑器是否在左括号后自动插入右括号。
    "editor.autoClosingBrackets": false,
      // 控制是否在编辑器中检测链接并使其可被点击。
    "editor.links": false,
    // 控制编辑器是否显示缩进参考线。
    "editor.renderIndentGuides": false,

    // 覆盖当前所选颜色主题的颜色。
    "workbench.colorCustomizations": {
        "editor.background": "#000000",
        "statusBar.background": "#111111",
        "statusBar.noFolderBackground": "#111111",


    },
}

即

{
    "files.associations": {
        "*.php": "html"
    }
    "editor.minimap.enabled": false,

      // 控制编辑器是否在左括号后自动插入右括号。
    "editor.autoClosingBrackets": false,
      // 控制是否在编辑器中检测链接并使其可被点击。
    "editor.links": false,
    // 控制编辑器是否显示缩进参考线。
    "editor.renderIndentGuides": false,

    // 覆盖当前所选颜色主题的颜色。
    "workbench.colorCustomizations": {
        "editor.background": "#000000",
        "statusBar.background": "#111111",
        "statusBar.noFolderBackground": "#111111",

    },
}

在

https://www.jianshu.com/p/c68068eba6c5

中也有类似的介绍。

总数：6　页次：1/1　首页尾页　　

所在合集/目录

Visual Studio Code 更多

发表评论:

本帖子属于以下条目(vscode)

[vscode]当今最流行 IDE 微软开源的 Visual Studio Code(VS code)

[vscode/golang]vscode 中的代码提示和定义跳转其实只和 gocode.exe 相关，如果不工作请升级 gocode 的版本

[高速下载地址]vscode中调试golang的完整文件合集 -- 版本1[含 dlv]

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.