HBuilderX自定义UI主题界面风格

自定义UI主题介绍

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

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

  • 目前只能在现有的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.tabsBackgroundtabs背景颜色
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.modifiedsvn/git项目修改状态前景色
explorer.file.status.untrackedsvn/git项目未跟踪状态前景色
explorer.file.status.addedsvn/git项目添加状态前景色
explorer.file.status.conflictedsvn/git项目冲突状态前景色
explorer.file.status.renamesvn/git项目重命名状态前景色
explorer.file.status.marktextsvn/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.dropdownForegroundcombobox下拉列表前景颜色
settings.dropdownBordercombobox下拉列表边框颜色
settings.dropdownBackgroundcombobox下拉列表背景颜色
settings.dropdownListBordercombobox 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.activeForegroundtab选中时的前景颜色
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迷你地图滑块背景

开发者自定义的主题汇总

  • Monokai Dimmed

  • 粉色主题

  • 仿vscode的material的暗黑色主题

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

以上是 HBuilderX自定义UI主题界面风格 的全部内容， 来源链接： utcz.com/a/23634.html

回到顶部