Hbuilder X白色主题,白色配色及设置源码分享及下载

2020-04-23 11:19:05

Hbuilder X 白色主题,白色配色及设置源码分享及下载。

小宇手动制作了一款Hbuilder X白色主题,基于默认主题绿柔改编而来,先来看看效果吧!

·Hbuilder X 白色主题预览效果

Hbuilder X 白色主题预览外观效果

左侧文件导航,代码编辑器,顶部工具栏,菜单栏,底部的终端和状态栏,都统一成灰白风格啦。

·Hbuilder X 白色主题使用方法

第一步,进入Hbuilder X,在顶部菜单栏,找到工具,点 设置,进入 源码视图。

Hbuilder X 工具,设置,进入源码视图,用户设置,插入白色配色代码

第二步,在右侧用户设置的json文件,增加"workbench.colorCustomizations"项,如果已经有,请覆盖:

"workbench.colorCustomizations": {
  "[Default]": {
   "sideBar.background": "#f8f8f8", //加深项目管理器颜色
   "editor.background": "#f8f8f8", //加深编辑区域背景颜色
   "toolBar.background": "#f8f8f8",
   "toolBar.hoverBackground": "#efefef",
   "toolBar.border": "#efefef",
   "tab.activeBackground": "#bbbbbbA", //选中时的背景颜色
   "tab.activeForeground": "#333333", //选中时的前景颜色
   "tab.inactiveBackground": "#f8f8f8", //未选中时的背景颜色
   "tab.inactiveForeground": "#999999", //未选中时的前景颜色
   "tab.hoverBackground": "#efefef",
   "tab.unfocusedHoverBackground": "#f8f8f8", //未选中分栏里鼠标滑过未选中标签的背景颜色
   "tab.unfocusedActiveForeground": "#333333", //未选中分栏里选中标签的前景颜色
   "tab.unfocusedInActiveForeground": "#f8f8f8", //未选中分栏里选中标签的前景颜色
   "editorSuggestWidget.selectedBackground": "#efefef", //助手弹窗选中条目时背景颜色
   "editorSuggestWidget.background": "#efefef", //助手弹窗背景颜色
   "editorSuggestWidget.border": "#cccccc", //助手弹窗边框颜色
   "input.background": "#efefef", //文本框背景颜色
   "inputValidation.infoBackground": "#f8f8f8", //下拉框背景颜色
   "inputList.hoverBackground": "#efefef", //鼠标滑过item背景颜色
   "inputList.border": "#efefef", //下拉框边框颜色
   "list.foreground": "#999999", //前景颜色
   "list.highlightForeground": "#666666", //高亮时前景颜色
   "list.activeSelectionBackground": "#efefef", //选中条目背景颜色
   "list.activeSelectionForeground": "#666666", //选中条目前景颜色
   "list.hoverBackground": "#efefef", //鼠标滑过背景颜色
   "outlineBackground": "#f8f8f8", //文档结构背景颜色
   "scrollbarSlider.background": "#efefef", //滚动条背景颜色
   "scrollbarSlider.hoverBackground": "#666666", //鼠标滑过滚动条背景颜色
   "extensionButton.prominentBackground": "#f8f8f8", //背景颜色
   "extensionButton.prominentForeground": "#666666", //前景颜色
   "extensionButton.border": "#efefef", // 边框颜色
   "extensionButton.prominentHoverBackground": "#efefef", //鼠标滑过时的背景颜色
   "extensionButton.checkColor": "#666666", //选中时的前景颜色
   "settings.textInputBorder": "#cccccc", //文本框边框颜色
   "inputOption.activeBorder": "#666666", //文本框有焦点时边框颜色
   "settings.dropdownBorder": "#cccccc", // combobox下拉列表边框颜色
   "settings.dropdownListBorder": "#cccccc", //combobox item边框颜色
   "imageview.background": "#f8f8f8", //浅色方格颜色
   "imageview.foreground": "#cccccc", //深色方格颜色
   "statusBar.background": "#f8f8f8", //状态栏背景颜色
   "statusBar.foreground": "#999999", //状态栏前景颜色
   "minimap.handle.background": "#cccccc", //迷你地图滑块背景
   "terminal.background": "#f8f8f8", //终端背景颜色
   "console.background": "#f8f8f8" //控制台背景颜色
  }
 }

如果不好复制,可以直接下载:

链接: https://pan.baidu.com/s/1UavvXqmOna3srCJUXv3hTQ 提取码: mghp

第三步,ctrl+s保存设置,如果当前的主题是 绿柔,会立即生效,如果不是绿柔,请点 菜单栏,工具,主题,切换到绿柔。

切换Hbuilder X 主题为绿柔,应用白色配色

·Hbuilder X 白色主题恢复方法

如果您想恢复绿柔默认的配色方案,只需要在Json中删除第二步添加的 "workbench.colorCustomizations"项即可。

115210
小宇
ShopXO插件 ▶力扣 ▶Github ▶M站