自定义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提取外观主题。

文本编辑区

名称	描述
editor.foreground	编辑区前景颜色
editor.background	编辑区背景颜色

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

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

名称	描述
titleBar.activeBackground	背景颜色
titleBar.activeForeground	前景颜色

工具栏

名称	描述
toolBar.background	工具栏背景颜色
toolBar.border	工具栏边框颜色
toolBar.hoverBackground	工具栏上图标被选中时的背景颜色

文件资源管理器

名称	描述
sideBar.background	背景颜色
sideBar.border	边框颜色

标签卡

名称	描述
editorGroupHeader.tabsBackground	tabs背景颜色
tab.activeBackground	选中时的背景颜色
tab.border	边框颜色
tab.inactiveBackground	未选中时的背景颜色
tab.hoverBackground	鼠标滑过时的背景颜色
tab.inactiveForeground	未选中时的前景颜色
tab.activeBorder	选中时的边框颜色
tab.activeForeground	选中时的前景颜色
tab.unfocusedInactiveForeground	未选中分栏里未选中标签的前景颜色
tab.unfocusedHoverBackground	未选中分栏里鼠标滑过未选中标签的背景颜色
tab.unfocusedActiveForeground	未选中分栏里选中标签的前景颜色

分栏

名称	描述
editorGroup.border	分割线颜色
tab.unfocusedActiveForeground	未激活分组里选中标签前景色

按钮

名称	描述
button.background	按钮背景颜色
button.foreground	按钮前景颜色
button.hoverBackground	鼠标滑过按钮背景颜色

代码助手

名称	描述
editorSuggestWidget.background	助手弹窗背景颜色
editorSuggestWidget.border	助手弹窗边框颜色
editorSuggestWidget.selectedBackground	助手弹窗选中条目时背景颜色
editorSuggestWidget.link	助手链接颜色

文本框

名称	描述
input.background	文本框背景颜色
input.foreground	文本框前景颜色
input.border	文本框边框颜色
focusBorder	文本框有焦点时边框颜色

列表控件/树控件区

名称	描述
list.foreground	前景颜色
list.activeSelectionBackground	选中条目背景颜色
list.activeSelectionForeground	选中条目前景颜色
list.hoverBackground	鼠标滑过背景颜色
list.highlightForeground	高亮时前景颜色
list.inactiveSelectionBackground	未选中条目背景颜色
list.inactiveSelectionForeground	未选中条目前景颜色

explorer.file.status.modified	svn/git项目修改状态前景色
explorer.file.status.untracked	svn/git项目未跟踪状态前景色
explorer.file.status.added	svn/git项目添加状态前景色
explorer.file.status.conflicted	svn/git项目冲突状态前景色
explorer.file.status.rename	svn/git项目重命名状态前景色
explorer.file.status.marktext	svn/git项目标记前景色

文档结构图

名称	描述
outlineBackground	文档结构背景颜色

滚动条

名称	描述
scrollbarSlider.background	滚动条背景颜色
scrollbarSlider.hoverBackground	鼠标滑过滚动条背景颜色

预览按钮

名称	描述
extensionButton.prominentBackground	背景颜色
extensionButton.prominentForeground	前景颜色
extensionButton.border	边框颜色
extensionButton.prominentHoverBackground	鼠标滑过时的背景颜色
extensionButton.checkColor	选中时的前景颜色

搜索下拉框

名称	描述
inputValidation.infoBackground	下拉框背景颜色
inputList.hoverBackground	鼠标滑过item背景颜色
inputList.border	下拉框边框颜色
inputList.titleColor	下拉框左边文字颜色
inputList.foreground	下拉框右边文字颜色

设置

名称	描述
editor.background	设置页面背景颜色
inputOption.activeBorder	文本框有焦点时边框颜色
settings.textInputBackground	文本框背景颜色
settings.textInputBorder	文本框边框颜色
settings.textInputDisableBackground	文本框不可用背景颜色
settings.dropdownForeground	combobox下拉列表前景颜色
settings.dropdownBorder	combobox下拉列表边框颜色
settings.dropdownBackground	combobox下拉列表背景颜色
settings.dropdownListBorder	combobox item边框颜色

图片预览

名称	描述
imageview.background	浅色方格颜色
imageview.foreground	深色方格颜色

弹窗提示框

名称	描述
notifications.border	弹窗边框颜色
notifications.background	弹窗背景颜色
notifications.foreground	弹窗前景颜色
notification.buttonBorder	弹窗按钮边框颜色
notification.buttonBackground	弹窗按钮背景颜色
notification.buttonForeground	弹窗按钮前景颜色
notification.buttonPressedForeground	弹窗按钮按下前景颜色
notification.buttonPressedBackground	弹窗按钮按下背景颜色
notificationLink.foreground	弹窗链接颜色

文件对比

名称	描述
filediff.line.add	添加行背景颜色
filediff.line.delete	删除行背景颜色
filediff.inline.base	行内比较和右边行有不同字符，左边字符显示颜色
filediff.inline.modify	行内比较和左边行有不同字符，右边字符显示颜色

控制台

名称	描述
terminal.background	终端背景颜色
console.background	控制台背景颜色
panelTitle.activeForeground	tab选中时的前景颜色
debug.foreground	前景颜色

查看svn/git日志

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

名称	描述
logviewButton.background	按钮背景颜色
logviewButton.border	按钮边框颜色
logviewButton.hover	鼠标滑过按钮背景颜色
logviewButton.disable	按钮不可用背景颜色
logviewButtonDisable.border	按钮不可用边框颜色

logview.file.action.modified	选中已修改文件前景色
logview.file.action.deleted	选中已删除文件前景色
logview.file.action.added	选中已增加文件前景色
logview.file.action.rename	选中已重命名文件前景色

状态栏

名称	描述
statusBar.background	状态栏背景颜色
statusBar.foreground	状态栏前景颜色

右侧迷你地图

名称	描述
minimap.handle.background	迷你地图滑块背景

开发者自定义的主题汇总

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

主题插件

HBuilderX自定义主题辅助工具

v***@163.com

我自己配的，欢迎使用，在vscode里搜索 "vintui" 也能搜得到
"workbench.colorCustomizations": {
"[Atom One Dark]": {
// Base
// "foreground": "#F8F8F2",

//标题栏
"titleBar.activeBackground": "#051e33",

//工具栏
"toolBar.background": "#0b2942", //工具条背景
"toolBar.border": "#164267",
"toolBar.hoverBackground": "#164267",

//按钮
"button.background": "#3399ff", //按钮背景
"button.foreground": "#ffffff", //按钮前景

//文本框
"input.background": "#0b2942", //文本框背景颜色
"input.foreground": "#c0c4cc", //前景颜色
"input.border": "#164267",
"focusBorder": "#3399ff",//文本框有焦点时边框颜色

// 项目文件列表
"list.foreground": "#F8F8F2", //前景颜色
"list.activeSelectionBackground": "#164267",
// "list.activeSelectionForeground": "",
"list.hoverBackground": "#164267",
"list.inactiveSelectionBackground": "#164267",
"list.inactiveSelectionForeground": "#ffffff",
"list.focusBackground": "#233e55",
"list.dropBackground": "#164267",
"list.highlightForeground": "#9769dc",

// explorer.file.status.modified svn/git项目修改状态前景色
// explorer.file.status.untracked svn/git项目未跟踪状态前景色
// explorer.file.status.added svn/git项目添加状态前景色
// explorer.file.status.conflicted svn/git项目冲突状态前景色
// explorer.file.status.rename svn/git项目重命名状态前景色
// explorer.file.status.marktext svn/git项目标记前景色

//项目资源管理器
"sideBar.background": "#051e33",
"sideBarSectionHeader.background": "#041829",

// 标签卡
// "tab.Background":"#263238",
"editorGroupHeader.tabsBackground": "#263238", //背景颜色
"tab.border": "#164267", //边框颜色
"tab.activeBorder": "#3399ff", //选中时的边框颜色
"tab.activeBackground": "#164267",
"tab.activeForeground": "#FFFFFF",
"tab.inactiveBackground": "#0b2942", //未选中时的背景颜色
"tab.inactiveForeground": "#F8F8F2",
"tab.hoverBackground": "#164267",
"tab.unfocusedActiveBorder": "#164267",

//代码助手
"editorSuggestWidget.background": "#132b3f", //助手弹窗背景颜色
"editorSuggestWidget.border": "#164267", //助手边框颜色
"editorSuggestWidget.foreground": "#F8F8F2", //前景颜色
"editorSuggestWidget.highlightForeground": "#ffffff",
"editorSuggestWidget.selectedBackground": "#164267", //助手弹窗选中条目时背景颜色

//预览按钮
"extensionButton.prominentBackground": "#3399ff",
"extensionButton.prominentForeground": "#F8F8F2",
"extensionButton.border": "#3399ff",
"extensionButton.prominentHoverBackground": "#5cadff",

// 分栏
"editorGroup.border": "#164267", //分割线颜色
"tab.unfocusedActiveForeground": "#F8F8F2", //未激活分组里选中标签前景色

//滚动条
"scrollbarSlider.background": "#132b3f",
"scrollbarSlider.hoverBackground": "#164267",

//搜索下拉框
"inputValidation.infoBorder": "#45ccfd",

//编辑区
"editor.background": "#0C1021",
// "editor.foreground": "#a6b0b9",
"editorLineNumber.foreground": "#7a8a9a",
"editorLineNumber.activeForeground": "#80a2c2",
// "editor.lineHighlightBorder": "",
// "editor.rangeHighlightBackground": "",
"editorWhitespace.foreground": "#7a8a9a",

// 文档结构
"outlineBackground": "#0b2942",

//设置
"settings.dropdownBackground": "#0b2942",
"settings.dropdownForeground": "#F8F8F2",
"settings.textInputForeground": "#F8F8F2",
"settings.textInputBackground": "#0b2942",
"settings.dropdownBorder": "#164267",
"settings.dropdownListBorder": "#164267", //下拉列表item边框

//终端
"terminal.background": "#002458",
"terminal.foreground": "#F8F8F2",
"panelTitle.activeForeground": "#ffffff",
"console.background": "#002458",
"debug.background": "#002458",

//底部状态栏
"statusBar.background": "#051e33",
"statusBar.foreground": "#F8F8F2",
"statusBar.border": "#164267",

"minimap.handle.background": "#495C66"
}
}

2020-07-25 15:20

1***@qq.com

自带主题有很多属性都不会变色比如：document.body.scrollLeft 有的时候打错了都不知道，我也不知道为什么，对这方面不懂，不过希望还是可以变得更好这款软件用着很舒服

2020-07-20 12:04

小明kf

能不能支持下设置背景图片类似vscode 那样感觉会更加炫酷

2020-07-03 09:10

wangOfPeng

tab.activeForeground
选中时的前景颜色，没有效果，一直是白色的

2020-06-11 17:03

uniapp棒棒的

没有找到终端的背景颜色

2020-06-11 10:45

Developer01

请问HBuilder中注释颜色如何修改？

2020-06-07 19:55

前端小白菜55

我为什么设置了一点用都没有？
'''
"workbench.colorCustomizations": {
"[Monokai]": {//酷黑
"toolBar.background": "#272822", //工具栏背景色设为黑色
"sideBar.background":"#272822", //项目管理器背景色设为黑色
"editor.background":"#272822"
}
}
}
'''

2020-06-07 16:54

YJ红烧

我有淡蓝色的

2020-05-18 10:54

DCloud_HB_WDL (作者)

回复 dyjx2004 ：

暂不支持

2020-04-24 10:37

dyjx2004

代码变量、这些颜色可以自定义吗

2020-04-24 10:34

HBuilderX自定义UI主题界面风格