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
}
相关推荐
小小小小宇21 分钟前
CSS 渐变色
前端
snow@li1 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇1 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)2 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy2 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七2 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七2 小时前
14.Python Socket客户端开发指南
前端·python
ElasticPDF-新国产PDF编辑器2 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf
拉不动的猪2 小时前
react基础2
前端·javascript·面试
kovlistudio2 小时前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm