Creating a Custom Theme

The User Theme

The Administration > UI settings page is where you set options related to the UI including where you select a theme. You can select the userTheme option in the Choose theme dropdown, then choose from the 20 Material Design Color Palettes to use within the Mango UI.

Per the Material Design Color Spec, you choose one color palette for each of the three color intentions plus one for the background palette.

  • Primary palette - Used to represent primary interface elements.
  • Accent palette - Used to represent secondary interface elements.
  • Warning palette - Used to represent interface elements that the user should be careful of such as a delete button.

Unfortunately, using this method alone you are limited in being able to specify which color shade from the palette you wish to use, or the option to use a specific color from your brand. In order to get this deeper level of theme customization you will need to edit the uiSettings.json file.

Modifying uiSettings.json 

The uiSettings.json file can be found at ${MA_HOME}/web/modules/mangoUI/web/ui/uiSettings.json. You will probably want to copy this file to overrides at ${MA_HOME}/overrides/web/modules/mangoUI/web/ui/uiSettings.json to avoid losing your modifications when you update the mangoUI module.

Here is a modified uiSettings.json file that defines a customOrange palette and a customBurntOrange palette, as well as a greenAndOrange theme that utilizes specific shades from each custom palette to compose the primary and secondary palette's used within the UI.

Note that you need to specify the entire color range of hues for the palette. Here is a useful material palette generator that allows you to specify the base color (which will be used as shade 500) and will generate all the other shades. You can then click the copy icon and grab the javascript object that contains the colors. Note you will need to convert the single quotes to double quotes to make the code valid JSON when inserting into uiSettings.json.

Below are code snippets that show the modified parts of the file:

"customGreen": {
      "50": "eef4ed",
      "100": "d4e5d3",
      "200": "b7d3b5",
      "300": "9ac197",
      "400": "84b481",
      "500": "6ea76b",
      "600": "669f63",
      "700": "5b9658",
      "800": "518c4e",
      "900": "3f7c3c",
      "A100": "d1ffcf",
      "A200": "a0ff9c",
      "A400": "6fff69",
      "A700": "57ff4f",
      "contrastDefaultColor": "light",
      "contrastDarkColors": "50 100 200 300 A100"
    },
    "customBurntOrange": {
      "50": "fdf3eb",
      "100": "fae1cd",
      "200": "f7cdac",
      "300": "f3b88a",
      "400": "f1a971",
      "500": "ee9a58",
      "600": "ec9250",
      "700": "e98847",
      "800": "e77e3d",
      "900": "e26c2d",
      "A100": "ffffff",
      "A200": "fff5f0",
      "A400": "ffd2bd",
      "A700": "ffc1a3",
      "contrastDefaultColor": "light",
      "contrastDarkColors": "50 100 200 300 A100"
    }

Lastly, here is the code snippet that defines the greenAndOrange theme, picking from color shades within our new custom palettes.

"greenAndOrange": {
      "primaryPalette": "customGreen",
      "primaryPaletteHues": {
        "default": "500",
        "hue-1": "300",
        "hue-2": "600",
        "hue-3": "A100"
      },
      "accentPalette": "customBurntOrange",
      "accentPaletteHues": {
        "default": "A400",
        "hue-1": "A100",
        "hue-2": "A200",
        "hue-3": "A700"
      },
      "dark": true
    }

You can select the custom greenAndOrange theme from the UI settings page within the app.

custom-user-theme.png