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
}
相关推荐
秋子aria几秒前
模块的原理及使用
前端·javascript
菜市口的跳脚长颌几秒前
一个 Vite 打包配置,引发的问题—— global: 'globalThis'
前端·vue.js·vite
胖虎2651 分钟前
实现无缝滚动无滚动条的 Element UI 表格(附完整代码)
前端·vue.js
小左OvO2 分钟前
基于百度地图JSAPI Three的城市公交客流可视化(一)——线路客流
前端
星链引擎4 分钟前
企业级智能聊天机器人 核心实现与场景落地
前端
GalaxyPokemon5 分钟前
PlayerFeedback 插件开发日志
java·服务器·前端
爱加班的猫6 分钟前
深入理解防抖与节流
前端·javascript
自由日记20 分钟前
学习中小牢骚1
前端·javascript·css
泽泽爱旅行24 分钟前
业务场景-opener.focus() 不聚焦解决
前端
VOLUN29 分钟前
Vue3 选择弹窗工厂函数:高效构建可复用数据选择组件
前端·javascript·vue.js