How to unify the theme style

This article applies to webview, custom editor

HBuilderX supports creating views and custom editors to build user interfaces.

How to create a perfect theme?

Get theme data of HBuilderX

The following javascript code (can be saved as a js file) is used to obtain the following data:

  • Themes in settings and user-defined theme colors
  • Editor font
  • Editor font size
  1. const hx = require('hbuilderx');
  3. /**
  4.  * @description Is an 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 Get the color matching the theme
  13.  *   - fontFamily           
  14.  *   - fontSize             
  15.  *   - background           
  16.  *   - fontColor           
  17.  *   - liHoverBackground    
  18.  *   - inputBgColor         
  19.  *   - inputLineColor       
  20.  *   - lineColor           
  21.  *   - scrollbarColor  
  22.  * @param {String} area - In the HBuilderX, when area=undefinded, it returns the background color of the editor area; when area=siderBar, it returns the background color of the project manager
  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.     // Get editor font size
  39.     let fontSize = config.get('editor.fontSize');
  40.     if (fontSize == undefined) {
  41.         fontSize = 14;
  42.     };
  44.     // Get editor font family
  45.     let fontFamily = config.get("editor.fontFamily");
  46.     if (fontFamily) {
  47.         fontFamily = "Monaco"
  48.     };
  50.     // Get current color theme
  51.     if (colorScheme == undefined) {
  52.         colorScheme = 'Default';
  53.     };
  55.     // Get custom color
  56.     let customColors = {};
  57.     try{
  58.         customColors = colorcustomColorsizations[`[${colorScheme}]`];
  59.         if (!isObj(customColors)) {
  60.             customColors = {};
  61.         };
  62.     }catch(e){};
  64.     // According to the parameters, return to the editor or project manager background color
  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. };

Monitor theme setting

HBuilder will notify the view when it finds that the values of editor.colorScheme, editor.fontSize, and editor.fontFamily have changed.

  1. //Call above javascript code
  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. });