User Interface Theme Schema
The following is a copy of the schema for the platform's user interface (UI) theme. You can find this schema (a JSON file called theme-schema.json ) in the installer folder in the platform's control plane installation package (control-plane-values.yaml).
{
"type": "object",
"properties": {
"colors": {
"type": "object",
"properties": {
"primary": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the primary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"primaryDark": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the dark variation of the primary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"secondary": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the secondary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"secondaryDark": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the dark variation of the secondary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"components": {
"type": "object",
"additionalProperties": {
"type": "object",
"properties": {
"primary": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the primary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"primaryDark": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the dark variation of the primary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"secondary": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the secondary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
},
"secondaryDark": {
"type": "object",
"properties": {
"5": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"10": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"20": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"40": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"60": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"80": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
},
"100": {
"description": "A hex color string representing a single color. Example: \"#000000\"."
}
},
"required": [
"5",
"10",
"20",
"40",
"60",
"80",
"100"
],
"additionalProperties": false,
"description": "The palette for the dark variation of the secondary color of the theme. `5` is the lightest variation whereas `100` is the darkest variation."
}
},
"additionalProperties": false,
"description": "The set of primary, primaryDark, secondary and secondaryDark color ranges to override for the given component."
},
"propertyNames": {
"enum": [
"hero"
]
},
"description": "A map whereby the key represents a component name to override the core palettes (e.g. \"hero\") for, and the value a core palette object that will act as the override."
}
},
"additionalProperties": false,
"description": "Settings to control the colors of the application theme."
},
"images": {
"type": "object",
"properties": {
"logoNav": {
"description": "The data URI representing the logo used in the top left corner of the application."
}
},
"additionalProperties": false,
"description": "A set of images whereby the key is the image to override and the value is a data uri for an image."
}
},
"additionalProperties": false,
"$schema": "http://json-schema.org/draft-07/schema#"
}