Applying themes

You can apply user-created custom themes on the Default and Modern themes.

Before you begin

In case you have existing custom themes, take a backup of the CSS files.

About this task

You can apply your custom themes to the application, by using the theme property in the config.json file.
Property Value Description
theme default The default value of the property. Setting this value to the theme property, supports using custom themes.
carbon Applies Carbon theme to the application. This theme does not support custom themes.

Procedure

  1. Go to the following folder depending upon your deployment type.
    Note: You can also locate the custom.css file (sample custom file) in this folder.
    On-premise deployment
    $WAS_HOME/profiles/<WAS profile>/installedApps/<NodeCell>/mdm_ui.war.ear/mdm_ui.war/css/custom-style
    Containerized deployment
    /opt/ibm/wlp/usr/servers/ipm/apps/expanded/mdm_ui.war/css/custom-style
  2. Create the copy of the sample custom theme file (CSS format) present in the folder.
    For example custom_copy.css.
  3. Update the custom_copy.css file to create a custom theme.
  4. Save the updated the custom_copy.css file to now use the Default theme in the application.
    Important: Save this file with a modern prefix to use Modern theme in the application. For example, modern_custom.css file.
  5. Go to the Design manager > Lookups > Lookup table console > Themes Lookup table.
  6. Add the following details under the Lookup table entries section, and click Save.
  7. Add the CSS file name in the Id column and the name that you want displayed on the UI as the input for the Name column, and click Save.

Results

Go to the Left pane > Settings > Application settings > Choose theme. The drop-down list now displays the list of themes fetched from the Themes Lookup table.