如何适配主题

本文适用于webview、自定义编辑器

HBuilderX支持创建视图、自定义编辑器，来构建用户界面。

如何创建一个好看、风格统一的UI？

获取HBuilderX主题数据

下面的js代码(可以保存为js文件)，主要用来获取如下数据：

  • 设置中的主题、以及用户自定义的主题颜色
  • 编辑器字体
  • 编辑器字体大小
  1. const hx = require('hbuilderx');
  3. /**
  4.  * @description 判断是否是object
  5.  * @param {Object} object
  6.  */
  7. function isObj(object){
  8.     return object && typeof (object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
  9. };
  11. /**
  12.  * @description 获取跟主题相匹配的颜色
  13.  *   - fontFamily           字体
  14.  *   - fontSize             字号
  15.  *   - background           背景色
  16.  *   - fontColor            字体颜色
  17.  *   - liHoverBackground    li类元素，悬停背景色
  18.  *   - inputBgColor         输入框背景色
  19.  *   - inputLineColor       输入框线条颜色
  20.  *   - lineColor            其它线条颜色
  21.  *   - scrollbarColor       滚动条颜色
  22.  * @param {String} area - HBuilderX区域，当area=undefinded，返回编辑器区域的背景色；当area=siderBar时，返回项目管理器背景色
  23.  * @return {Object}
  24.  */
  25. function getHBuilderXThemeData(area) {
  26.     let background;
  27.     let fontColor;
  28.     let liHoverBackground;
  29.     let inputBgColor;
  30.     let inputLineColor;
  31.     let lineColor;
  32.     let scrollbarColor;
  34.     let config = hx.workspace.getConfiguration();
  35.     let colorScheme = config.get('editor.colorScheme');
  36.     let colorcustomColorsizations = config.get('workbench.colorCustomizations');
  38.     // 获取HBuilderX编辑器字体大小
  39.     let fontSize = config.get('editor.fontSize');
  40.     if (fontSize == undefined) {
  41.         fontSize = 14;
  42.     };
  44.     // 获取HBuilderX编辑器字体
  45.     let fontFamily = config.get("editor.fontFamily");
  46.     if (fontFamily) {
  47.         fontFamily = "Monaco"
  48.     };
  50.     // 获取当前主题
  51.     if (colorScheme == undefined) {
  52.         colorScheme = 'Default';
  53.     };
  55.     // 处理用户自定义的颜色
  56.     let customColors = {};
  57.     try{
  58.         customColors = colorcustomColorsizations[`[${colorScheme}]`];
  59.         if (!isObj(customColors)) {
  60.             customColors = {};
  61.         };
  62.     }catch(e){};
  64.     // 根据参数，返回编辑器、或项目管理器背景色
  65.     let viewBackgroundOptionName = area == 'siderBar' ? 'sideBar.background' : 'editor.background';
  66.     let viewFontOptionName = area == 'siderBar' ? 'list.foreground' : undefined;
  67.     let viewLiHoverBgOptionName = area == 'siderBar' ? 'list.hoverBackground' : 'list.hoverBackground';
  69.     switch (colorScheme){
  70.         case "Monokai":
  71.             background = 'rgb(39,40,34)';
  72.             fontColor = 'rgb(179,182,166)';
  73.             liHoverBackground = 'rgb(78,80,73)';
  74.             inputBgColor = '#2E2E2E';
  75.             inputLineColor = 'rgb(81,140,255)';
  76.             lineColor = 'rgb(23,23,23)';
  77.             scrollbarColor = '#6F6F6F';
  78.             break;
  79.         case "Atom One Dark":
  80.             background = 'rgb(40,44,53)';
  81.             fontColor = 'rgb(171,178,191)';
  82.             liHoverBackground = 'rgb(44,47,55)';
  83.             inputBgColor = '#2E2E2E';
  84.             inputLineColor = 'rgb(81,140,255)';
  85.             lineColor = 'rgb(33,37,43)';
  86.             scrollbarColor = '#6F6F6F';
  87.             break;
  88.         default:
  89.             background = 'rgb(255,250,232)';
  90.             fontColor = '#243237';
  91.             liHoverBackground = 'rgb(224,237,211)';
  92.             inputBgColor = 'rgb(255,254,250)';
  93.             inputLineColor = 'rgb(65,168,99)';
  94.             lineColor = 'rgb(225,212,178)';
  95.             scrollbarColor = 'rgb(207,181,106)';
  96.             break;
  97.     };
  99.     if (customColors != undefined) {
  100.         if (customColors[viewBackgroundOptionName] && viewBackgroundOptionName in customColors) {
  101.             background = customColors[viewBackgroundOptionName];
  102.         };
  103.         if (customColors[viewFontOptionName] && viewFontOptionName in customColors) {
  104.             fontColor = customColors[viewFontOptionName];
  105.         };
  106.         if (customColors[viewLiHoverBgOptionName] && viewLiHoverBgOptionName in customColors) {
  107.             liHoverBackground = customColors[viewLiHoverBgOptionName];
  108.         };
  109.     };
  111.     return {
  112.         fontFamily,
  113.         fontSize,
  114.         background,
  115.         fontColor,
  116.         liHoverBackground,
  117.         inputLineColor,
  118.         inputBgColor,
  119.         lineColor,
  120.         scrollbarColor
  121.     };
  122. };
  124. module.exports = {
  125.     getHBuilderXThemeData
  126. };

监听主题切换

监听设置项editor.colorScheme、editor.fontSize、editor.fontFamily，当值改变后，发送消息（含主题数据）到视图。

  1. // 引用上面的js代码
  2. let configurationChangeDisplose = hx.workspace.onDidChangeConfiguration(function(event){
  3.     if(event.affectsConfiguration("editor.colorScheme") || event.affectsConfiguration("editor.fontSize") || event.affectsConfiguration("editor.fontFamily") ){
  4.         let ThemeColorData = getHBuilderXThemeData();
  5.         webView.postMessage({
  6.             "command": "themeColor",
  7.             "data": ThemeColorData
  8.         });
  9.     };
  10. });