Hello everyone,

I'm exploring ways to customize the skin of the MAF application without modifying the OOTB CSS files provided by IBM.

My initial approach is replacing replacing color codes defined in "style" contents of html document during the application's initialization. 

In this first version, my code only supports color replacement, but it could be expanded to include more complex style modifications in the future.

Code:

// Custom Application Logic

class AppCustomizations {
  applicationInitialized(app) {
    this.app = app;
    this.applyTheme();
  }

  /**
   * Replace the color code in style tags
   */
  applyTheme() {
    const start = performance.now();
    var styleElements = document.getElementsByTagName('style');
    for (var i = 0; i < styleElements.length; i++) {
      var styleContent = styleElements[i].innerHTML;
      // TODO: may be store the code matrix in to the system properties to simplify the changes
      var replacements = {
        // header
        '#161616': '#0070AD',
        // filter tag
        '#d0e2ff': '#E557AD',
        "#002d9c": '#ECECEC',
        // button
        '#0f62fe': '#338091',
        '#393939': '#12ABDB',
        '#0353e9': '#0070AD',
        // loading circle
        '#0062ff': '#ECECEC'
      };
      for (var oldColor in replacements) {
        var newColor = replacements[oldColor];
        // Use a regular expression to replace the old color with the new color
        var regex = new RegExp(oldColor, 'g');
        styleContent = styleContent.replace(regex, newColor);
      }
      styleElements[i].innerHTML = styleContent;
    }
    const end = performance.now();
    console.log(`applyTheme execution time: ${end - start} ms`);
  }

}


export default AppCustomizations;

Result:

This approach is working. However, my concern is the performance impact, as the color replacement process can take up to 1.5 seconds for a small set of colors (as shown in my code above), and the customer's requirement could be more complex. Not only replace the color code, but also display their login in the position of "company-name" of MANAGE-SHELL for example.

While optimizing this process is a potential solution, I'm seeking recommendations from the IBM Labs and also the whole TechExchange Community before proceeding with further research on my side. :-) 

Update:

Another solution could be adding a new section of style at the end and specify all the css classes to be overriden.

What is the best practice to change the skin for all the MAF based application? 

In my previous role at Tririga, which also utilizes the "carbon design" UI, we were able to easily override platform skin CSS by uploading a custom CSS file to the application platform.

I'm curious if Maximo has similar functionality planned for its roadmap.

Any suggestions will be appreciated. 

Best regards,