如何適配主題

本文適用於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. });