vscode修改背景色

简介: vscode修改背景色

深色主题背景颜色修改:

body.vscode-dark {
    background-color: black;
}

浅色主题背景颜色修改:

body.vscode-light {
        background-color: white;
 }

根据不同主题色来适配控件颜色:

.vscode-dark .btn-style {
    margin: 20px 20px 0px 0px;
    color: white;
    overflow: visible;
}
.btn-style {
    margin: 20px 20px 0px 0px;
    color: black;
    overflow: visible;
}

vscode如果有2个控件同时起作用,需要同时指定:

// 深色主题
.vscode-dark input[readonly], 
.vscode-dark select[readonly] {
    background:rgb(51, 51, 51) !important;
    border: 1px solid #4f4f4f !important;
    box-shadow: none !important;
    color:rgba(153, 153, 153, 0.7);
}
// 浅色主题
input[readonly],select[readonly] {
    background:white !important;
    border: 1px solid #4f4f4f !important;
    box-shadow: none !important;
    color:rgba(153, 153, 153, 0.7);
}
相关文章
|
7月前
VSCode 如何设置背景图片
VSCode 如何设置背景图片
590 1
|
7月前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
修改vscode侧边栏颜色
修改vscode侧边栏颜色
920 0
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
这篇文章提供了在VScode中设置背景图的详细步骤,包括下载background插件、编辑setting.json文件、配置背景样式,并解决了设置后出现的不支持提示的问题。
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
Vscode设置标签页多行显示
这篇文章提供了在VSCode中设置标签页多行显示的方法,以提高编辑效率。
Vscode设置标签页多行显示
|
7月前
让VSCode的快捷键切换为WebStorm/IDEA的快捷键、修改颜色主题(深色模式)、文件图标主题
让VSCode的快捷键切换为WebStorm/IDEA的快捷键、修改颜色主题(深色模式)、文件图标主题
|
7月前
vscode中设置HTML模板
vscode中设置HTML模板
|
7月前
|
JSON JavaScript 数据格式
vscode添加自定义注释
vscode添加自定义注释
409 0
|
7月前
vscode状态栏显示
vscode状态栏显示