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 add a custom palette to the UI settings JSON store.

Modifying UI settings JSON store

In the Mango UI navigate through the menu to the JSON store (Administration > JSON store), then click the edit icon next to the UI Settings entry. Or navigate to  //yourmangodomain/ui/administration/json-store-editor/mangoUI-settings

You will need to add a "palettes" entry to the existing JSON, then press Save. Example shown below.

{
    "... existing entries if any": "comma important ->",

    "palettes": {
        "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"
        }
    }
}

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 the UI settings JSON store.

Once you have saved the JSON store, navigate to the UI settings page (Administration > UI Settings) and refresh your browser (F5). You can now select userTheme from the Choose theme drop down menu and choose your custom palette/s as the Primary/Accent/Warning/Background palette.

custompallete.PNG