HBuilderX选择主题以及自定义主题教程

最新推荐文章于 2025-02-19 17:12:12 发布

加贝力口贝

最新推荐文章于 2025-02-19 17:12:12 发布

阅读量1.4w

点赞数 3

分类专栏： HbuilderX 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_43102730/article/details/125616844

版权

HbuilderX 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在HBuilderX中选择预置主题并自定义界面颜色，包括使用方法及配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择主题

在HBuilderX中，您可以点击顶部菜单【工具】【主题】，选择切换您喜欢的主题颜色。
HBuilderX内置了3个主题, 分别为【绿柔】【雅蓝】【酷黑】

当前颜色主题，存储在用户设置（【设置】【源码视图】,即settings.json文件）中

"editor.colorScheme" : "Default"

自定义主题

自定义窗体主题功能，仅适用于HBuilderX 1.8.8+版本；

当前HBuilderX的自定义颜色都在配置文件settings.json中，并且可以复写以实现个性化。

自定义窗体主题

在文件setting.json的源码视图中，通过定义 “workbench.colorCustomizations” 字段来自定义您喜欢的主题颜色。可自定义的相关参数

"workbench.colorCustomizations": {
    "[Default]": {//绿柔
        "sideBar.background":"#faf6e6", //加深项目管理器颜色
        "editor.background":"#faf6e6" //加深编辑区域背景颜色
    },
    "[Monokai]": {//酷黑
        "toolBar.background": "#272822", //工具栏背景色设为黑色
        "sideBar.background":"#272822" //项目管理器背景色设为黑色
    },
    "[Atom One Dark]": {//雅蓝
        "sideBar.background": "#282c34", //项目管理器背景色设为与代码区背景色相同
        "editor.background":"#282c3f" //调亮编辑区域背景颜色
    }
}