Select Color Theme@theme
- In HBuilderX, you can click on the top menu [Tool - Color Theme] to your favorite color theme.
- HBuilderX has 3 built-in themes,
Default
Monokai
Atom one Dark
.
The settings of the current color theme stored in the user settings ([Settings] [Source View], that is, the settings.json file)
"editor.colorScheme" : "Default"
Custom theme@custom
Supported from HBuilderX 1.8.8+
The settings of the current color theme stored in settings.json
file. You can customize the color theme by overriding related settings.
Custom Window Theme@custom-window
In settings.json file of source view, you can customize the theme color you like by overriding the “workbench.colorCustomizations” field. Custom theme parameters
"workbench.colorCustomizations": {
"[Default]": {//Default
"sideBar.background":"#faf6e6",
"editor.background":"#faf6e6"
},
"[Monokai]": {//Monokai
"toolBar.background": "#272822",
"sideBar.background":"#272822"
},
"[Atom One Dark]": {//Atom one Dark
"sideBar.background": "#282c34",
"editor.background":"#282c3f"
}
}
Custom editor code color@custom-editor-code-style
Custom editor code color function, supported from HBuilderX 3.1.19+;
- Which code areas can be customized?
Custom code color supports setting different colors for code snippets, such as comment
, string
, keyword
, variable
, and tag
, etc.
Currently supported languages include: JavaScript(ES6+)
、HTML(ES6+)
、Vue
、CSS
、Less
、SCSS
、Stylus
、Typescript
、Markdown
、JSON
。
- How to customize?@how-to-custom
In settings.json file of source view, you can customize the theme color you like by overriding the “editor.tokenColorCustomizations” field.
You can copy the settings of Custom theme parameters to override rules
block of themes ([Default]
、[Monokai]
、[Atom One Dark]
), and then just change the color value.
Note:This method is only suitable for people who are familiar with the rules of the “settings.json” file. We recommend that you use the “color assist function” to update the “settings.json” file.
Example:
"editor.tokenColorCustomizations": {
"[Default]": {//Default
"rules":[
{
"scope": "comment",
"settings": {
"fontStyle": "italic",
"foreground": "#248C85"
}
}
]
},
"[Monokai]": {//Monokai
"rules":[
//...
]
},
"[Atom One Dark]": {//Atom one Dark
"rules":[
//...
]
}
}
Complete code color list:Custom code color parameters
- Custom code color assist function@auxiliary
Please follow our steps to customize code color:
- In
settings.json
file of source view, add the configuration"editor.tokenColorCustomizations"
. (This step is required.) - Place the cursor on the code position where you want to change the color, select the menu
Tools
-Theme
-Inspect Tokens And Colors
to view the current code coloring information - Copy the content of
Token Color Rule
output from the console in the previous step to"editor.tokenColorCustomizations"
field ofsettings.json
file. (Note: Put it under the corresponding theme) - After saving the
settings.json
file, you can see the modified theme.
Complete steps:
Notes: Now, you can customize the theme based on the 3 built-in themes Default
, Monokai
and Atom One Dark
by overriding the theme settings, but you cannot create new themes.
File Icon Theme@file-icon
Menu [Tools] [File Icon Theme], you can choose the file icon theme.