效果图:
-
第一步我们打开HBuilderX
选择工具 – 主题 – 选择(雅蓝) -
然后再设置,源码视图里面打开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
}