登录 用户中心() [退出] 后台管理 注册
 
您的位置: 首页 首页 >> SoftHub关联区 >> SoftHub关联区 >> 主题: VSCode修改编辑器(代码窗口)背景色[zt加原创]    [最新]
VSCode修改编辑器(代码窗口)背景色[zt加原创]
clq
浏览(0) - 2018-08-07 09:41:05 发表 编辑
经纬度拾取
关键字

[目前已存在于分组:]

关键字:

[2018-08-07 10:10:57 最后更新]
VSCode修改编辑器(代码窗口)背景色[zt加原创]

先看参考文章
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",


},
}


https://www.jianshu.com/p/c68068eba6c5
中也有类似的介绍。


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


该采集也在以下书单中
Visual Studio Code 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:


本帖子属于以下条目()

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

Copyright © 2005-2017 clq, All Rights Reserved
CLQ工作室 版权所有