自定义UI主题介绍

HBuilderX的窗体所有颜色都在配置文件中，并且可以复写以实现个性化。从HBuilderX 1.8.8起，支持自定义配置。

在HBuilderX的设置文件setting.json的源码视图中，通过定义"workbench.colorCustomizations"字段来自定义您喜欢的主题颜色。

从HBuilderX 2.9.2起，还支持使用插件直接配置主题，避免自己写复杂的配置，这个插件包括了很多常见主题：https://ext.dcloud.net.cn/plugin?id=2684

常用配置

• 目前只能在现有的3个主题Default柔和、Monokai酷黑、Atom One Dark雅蓝的基础之上复写，不能完全更新新主题。
• 目前只能修改软件主题外观。代码区的颜色只有自带的三种风格。

关于左侧项目管理器的背景色，和右侧代码区的背景色，两者是统一还是有区别？不同人有不同习惯。比如一些喜欢酷黑主题的开发者希望左边项目管理器也变成纯黑。

在HBuilderX的默认主题中，绿柔是左右统一，雅蓝左右不统一，酷黑在HBuilderX1.9.8以前左右不统一。

下面是几种常见配置，可根据自己需求统一或差异化颜色。

"workbench.colorCustomizations": {  
    "[Default]": {//绿柔  
        "sideBar.background":"#faf6e6" //加深项目管理器背景色  
        //以下为老HBuilder的标准主题颜色  
        //"sideBar.background":"#FFFFCC",  
        //"editorGroupHeader.tabsBackground":"#FFFFCC",  
        //"tab.inactiveBackground":"#FFFFCC",  
        //"editor.background":"#FFFFCC" //取消设置需重启生效  
    },  
    "[Monokai]": {//酷黑  
        "toolBar.background": "#272822", //工具栏背景色设为黑色  
        //"sideBar.background":"#535353",//项目管理器浅色背景  
        "sideBar.background":"#272822" //项目管理器背景色设为黑色  
    },  
    "[Atom One Dark]": {//雅蓝  
        "sideBar.background": "#282c34" //项目管理器背景色设为与代码区背景色相同  
    }  
}

以下是几种常用配置的预览图：

• 左右统一的黑色主题

• 左侧颜色更深的绿柔

• 老HBuilder默认的深黄色主题

以下为分类的颜色明细说明：

颜色配置命名规则与vscode相同，方便从vscode提取外观主题。

文本编辑区

注意：本主题自定义是外观方面，不同代码的着色自定义未开放。

mac标题栏（只在mac os上生效）

工具栏

文件资源管理器

标签卡

分栏

按钮

代码助手

文本框

列表控件/树控件区

文档结构图

滚动条

预览按钮

搜索下拉框

设置

图片预览

弹窗提示框

文件对比

控制台

查看svn/git日志

在svn/git项目上点击右键。只在mac上生效

状态栏

右侧迷你地图

开发者自定义的主题汇总

• Monokai Dimmed

• 粉色主题

• 仿vscode的material的暗黑色主题

• 在线主题

欢迎更多开发者提交自己配置的主题并共享出来。

主题插件

HBuilderX自定义主题辅助工具