You can customize the color palette for BlueCat Gateway by uploading a ui_customizations.json file to the General Configuration workflow in the Interface section.
The UI customization JSON file should contain palette definitions for all custom palettes that you want available to users. Gateway will let users choose the theme they want to use from all themes defined in your imported JSON file (as well as the standard Light and Dark themes).
Each palette entry should have the following format:
{
"<Palette ID>": {
"color_palette": "default",
"colors": {
"foreground_01": "<Color hex code>",
"foreground_01_text": "<Color hex code>",
"foreground_01_link": "<Color hex code>",
"background_01": "<Color hex code>",
"background_01_text": "<Color hex code>",
"background_01_link": "<Color hex code>",
"background_01_link_02": "<Color hex code>",
"background_01_text_02": "<Color hex code>",
"success": "<Color hex code>",
"warning": "<Color hex code>",
"error": "<Color hex code>"
}
},
Where:
<Palette ID>is a unique ID for the palette. This ID will appear in the Interface theme list in the General Configuration page. Palette IDs are case-sensitive, so"Orange"and"orange"specify different palettes.<Color hex code>is the RGB hex code for the color of that UI element, preceded by a hash (#) symbol. For example, the color hex code for black is"#ffffff".The
"color_palette": "default"setting is reserved for future use and should not be modified.
After importing a new UI customization file, you must restart BlueCat Gateway to see the new palettes.
To define a new theme in an existing UI customization file, copy an existing theme and paste it as a new entry and change the name/key to a new, unique ID. Then change the colors as defined by the hex codes to whatever you like.
success, warning, and error
messages. If a theme does not specify colors for success,
warning, and error, then Gateway will use those fallback colors instead.Sample UI customization file
For example:
{
"classic_black_theme": {
"color_palette": "default",
"colors": {
"foreground_01": "#0073ae",
"foreground_01_text": "#ffffff",
"foreground_01_link": "#000000",
"background_01": "#182a43",
"background_01_text": "#eeeeee",
"background_01_link": "#0093b8",
"background_01_link_02": "#FFFFFF",
"background_01_text_02": "#969696",
"success": "#76ce66",
"warning": "#ffc107",
"error": "#ff0000"
}
},
"orange_theme": {
"color_palette": "default",
"colors": {
"foreground_01": "#f58220",
"foreground_01_text": "#eeeeee",
"foreground_01_link": "#000000",
"background_01": "#eeeeee",
"background_01_text": "#000000",
"background_01_link": "#cb4814",
"background_01_link_02": "#000000",
"background_01_text_02": "#4a4a4a",
"success": "#22aa00",
"warning": "#d29e00",
"error": "#ff0000"
}
}
}