自学内容网 自学内容网

HBuilderx修改主题色-改变编辑器背景颜色等

效果图:
在这里插入图片描述

  1. 第一步我们打开HBuilderX
    在这里插入图片描述
    选择工具 – 主题 – 选择(雅蓝)

  2. 然后再设置,源码视图里面打开Setting.json文件
    在这里插入图片描述

3.将一下代码赋值到右侧用户设置即可

{
"workbench.colorCustomizations": {
//    "[Default]": {// 绿柔主题
//        "sideBar.background":"#faf6e6", // 项目管理器背景颜色
//        "editor.background":"#faf6e6" // 编辑区域背景颜色
//    },
//    "[Monokai]": {// 酷黑主题
//        "toolBar.background": "#272822", 
//        "sideBar.background":"#272822" 
//    },
"[Atom One Dark]": {
"sideBar.background": "#212224",
"editor.background": "#18191A" //
}
},
"editor.tokenColorCustomizations": {
//    "[Default]": {// 绿柔主题
//        "rules": [{}]
//    },
//    "[Monokai]": {// 酷黑主题
//         "rules": [{}]
//    },
"[Atom One Dark]": {
"rules": [{
"scope": [
"support.type.property-name"
],
"settings": {
"foreground": "#9CDCFE"
}
}, {
"scope": [
"support.constant.property-value.css"
],
"settings": {
"foreground": "#B5CEA8"
}
}, {
"scope": [
"variable.other.readwrite.js",
"variable.other.readwrite.tsx",
"variable.other.readwrite.ts"
],
"settings": {
"foreground": "#FFD710"
}
}, {
"scope": [
"text.html.vue"
],
"settings": {
"foreground": "#61AFEF"
}
}, {
"scope": [
"string"
],
"settings": {
"foreground": "#6CD8A6"
}
}]
}
},
"editor.colorScheme" : "Atom One Dark",
"Codegeex.Privacy" : true
}

原文地址:https://blog.csdn.net/zkl865748013/article/details/143451012

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!