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

效果图:

  1. 第一步我们打开HBuilderX

    选择工具 -- 主题 -- 选择(雅蓝)

  2. 然后再设置,源码视图里面打开Setting.json文件

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

lua 复制代码
{
	"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
}
相关推荐
爱分享的鱼鱼13 分钟前
对比理解 Vue 响应式 API:data(), ref、reactive、computed 与 watch 详解
前端·vue.js
JS_GGbond15 分钟前
【性能优化】给Vue应用“瘦身”:让你的网页快如闪电的烹饪秘籍
前端·vue.js
T___T16 分钟前
一个定时器,理清 JavaScript 里的 this
前端·javascript·面试
代码小学僧17 分钟前
从 Arco Table 迁移到 VTable:VTable使用经验分享
前端·react.js·开源
微笑的曙光18 分钟前
Vue3 环境搭建 5 步走(零基础友好)
前端
不知名用户来了22 分钟前
基于vue3 封装的antdv/element-Plus 快速生成增删改查页面
前端
明川28 分钟前
Android Gradle - ASM + AsmClassVisitorFactory插桩使用
android·前端·gradle
布列瑟农的星空29 分钟前
webpack迁移rsbuild——配置深度对比
前端
前端小黑屋31 分钟前
查看项目中无引用到的文件、函数
前端
前端小黑屋31 分钟前
小程序直播挂件Pendant问题
前端·微信小程序·直播