hbuilderX custom theme imitation vscode dark theme

Table of contents

hbuilderX custom theme imitation vscode dark theme

renderings

Setting method (just copy the theme code)

It is customized based on Yalan theme and needs to be switched to Yalan theme after setting

Automatically organize code when hbuilderx saves

1. First, find the tool on the top bar and open the settings

 2. Click on the editor settings next to it

 3. Find the automatic format when saving, check it

---

hbuilderX custom theme imitation vscode dark theme

renderings

Setting method (just copy the theme code)

It is customized based on Yalan theme and needs to be switched to Yalan theme after setting

"workbench.colorCustomizations": {
		"[Default]": {},
		"[Monokai]": {},
		"[Atom One Dark]": {
			"editor.background": "#1E1E1E",
			"sideBar.background": "#252526",
			"sideBarSectionHeader.background": "#263238",
			// 底部状态栏
			"statusBar.background": "#007ACC",
			"statusBar.button.hoverbackground": "#005c99",
			"statusBar.foreground": "#ffffff",
			//终端  
			"terminal.background": "#1E1E1E",
			"terminal.foreground": "#ffffff",
			"panelTitle.activeForeground": "#ffffff",
			"console.background": "#1E1E1E",
			"debug.background": "#1E1E1E",
			// 标签卡
			// "tab.Background":"#707070",  
			"editorGroupHeader.tabsBackground": "#2D2D2D", //背景颜色  
			"tab.border": "#252526", //边框颜色  
			"tab.activeBorder": "#252526", //选中时的边框颜色  
			"tab.activeBackground": "#1E1E1E",
			"tab.activeForeground": "#FFF",
			"tab.inactiveBackground": "#2D2D2D", //未选中时的背景颜色  
			"tab.inactiveForeground": "#969690",
			"tab.hoverBackground": "#3E3E3E",
			// "tab.unfocusedActiveBorder": "#546E7A"
			//标题栏
			// "titleBar.activeBackground": "#DDDDDD",
			// "titleBar.activeForeground": "#FFF",
			// "toolBar.background": "#ececec",
			"toolBar.border": "#474747",
			"toolBar.hoverBackground": "#F3f3f3",
			//列表控件  
			// "list.foreground": "#495C66", //前景颜色  
			"list.activeSelectionBackground": "#3B4040",
			"list.activeSelectionForeground": "#4690F0",
			"list.hoverBackground": "#3B4040"
		}
	}

Automatically organize code when hbuilderx saves

1. First, find the tool on the top bar and open the settings

 2. Click on the editor settings next to it

 3. Find the automatic format when saving, check it