DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-04-09 11:21
  • 更新:2021-11-10 15:50
  • 阅读:433688

HBuilderX自定义UI主题界面风格

分类:HBuilderX

自定义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自定义主题辅助工具

2 关注 分享
1***@qq.com 全盘崩坏

要回复文章请先登录注册

Sun_

Sun_

标签卡所在的那一行背景颜色没法改吗,editorGroupHeader.tabsBackground这一条改的是哪里呢?设置完没看到效果
2021-11-10 15:50
Zebra_

Zebra_

回复 DCloud_HB_WDL :
那就等待正式服更新吧
2021-06-16 14:42
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 Zebra_ :
HBuilderX 3.1.19-alpha,已支持自定义代码颜色。参考:[文档](https://hx.dcloud.net.cn/Tutorial/themes?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e7%bc%96%e8%be%91%e5%99%a8%e4%bb%a3%e7%a0%81%e9%a2%9c%e8%89%b2)
2021-06-16 12:07
Zebra_

Zebra_

不能自定义代码颜色就是个坑
2021-06-16 10:48
4***@qq.com

4***@qq.com

先把坑填平了再来整这些
2020-11-15 14:56
zmkm

zmkm

回复 DCloud_HB_WDL :
我想知道怎么修改主题透明度!
2020-11-15 14:53
zmkm

zmkm

我想知道怎么修改主题的透明度!!
2020-11-15 14:52
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 d***@yeah.net :
打不开的问题,试试这个帖子:[https://ask.dcloud.net.cn/article/35494](https://ask.dcloud.net.cn/article/35494)

此外推荐一个主题插件:[https://ext.dcloud.net.cn/plugin?id=2684](https://ext.dcloud.net.cn/plugin?id=2684)
2020-11-07 15:26
d***@yeah.net

d***@yeah.net

我擦,改了打不开了
2020-11-07 13:59
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 jingha :
暂不支持添加背景图
2020-11-02 11:06