选择主题@theme

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

选择主题@theme - 图1

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

  1. "editor.colorScheme" : "Default"

自定义主题@custom

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

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

自定义窗体主题@custom-window

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

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

自定义编辑器代码颜色@custom-editor-code-style

自定义编辑器代码颜色功能，仅适用于HBuilderX 3.1.19+版本；

- 支持自定义哪些代码区域？

自定义代码颜色支持注释、字符串、关键字、变量、标签等所有代码分区(token)颜色。

目前支持的语言包括：JavaScript(ES6+)、HTML(ES6+)、Vue、CSS、Less、SCSS、Stylus、Typescript、Markdown、JSON。

- 如何自定义@how-to-custom

在文件setting.json的源码视图中，通过定义"editor.tokenColorCustomizations"字段来自定义您喜欢的主题颜色。将可自定义代码颜色的相关参数中配置的规则复制到对应主题（[Default]、[Monokai]、[Atom One Dark]）的rules节点下，更改对应颜色即可。

注意：此方式相对比较复杂，适合对代码分区规则比较熟悉的同学，我们建议您采用下面提供的辅助功能进行自定义。

示例如下：

  1. "editor.tokenColorCustomizations": {
  2.     "[Default]": {//绿柔
  3.         "rules":[
  4.             {
  5.                 "scope": "comment",
  6.                 "settings": {
  7.                     "fontStyle": "italic",
  8.                     "foreground": "#248C85"
  9.                 }
  10.             }
  11.         ]
  12.     },
  13.     "[Monokai]": {//酷黑
  14.       "rules":[
  15.         //...
  16.       ]
  17.     },
  18.     "[Atom One Dark]": {//雅蓝
  19.       "rules":[
  20.         //...
  21.       ]
  22.     }
  23. }

完整的代码颜色列表参考：可自定义代码颜色的相关参数

- 自定义代码颜色辅助功能@auxiliary

为了简化自定义步骤，我们提供了以下步骤可以简便的自定义代码颜色：

  1. 在settings.json源码视图中加入"editor.tokenColorCustomizations"设置（必须执行该步骤才能看到后面步骤的菜单项）
  2. 将光标放到要改颜色的代码位置，选择菜单工具-主题-Inspect Tokens And Colors查看当前代码着色信息
  3. 将上一步控制台输出的Token Color Rule内容拷贝到settings.json的"editor.tokenColorCustomizations"对应位置（注意：要放到对应的主题下）
  4. 保存settings.json文件后即可看到修改后的效果

完整的操作动画如下图：

选择主题@theme - 图2

注意:

  • 目前只能在现有的3个主题Default柔和、Monokai酷黑、Atom One Dark雅蓝的基础之上复写，不能完全更新新主题。

文件图标@file-icon

菜单【工具】【项目管理器图标主题】，可以调整文件图标。

选择主题@theme - 图3