Creating a Theme

You can create your own themes to use in the Composer UI. To do this, you must have a JSON file that describes the interface. Use the JSON file provided in Sample Themes JSON File or download and use the JSON files provided with the supplied modern and dark themes. See Reviewing and Downloading the Theme JSON Code.

To create a theme:

1. Set up the JSON file that describes your theme. See Sample Themes JSON File.

2. Use the /api/customization/themes/ API endpoint in a POST request to create the theme. Use the text of your JSON file as the body ("content": "<string>") of the request. Be sure to remove the "system": true and "id": "<string>" properties from the JSON file before you use it to create a theme. Composer automatically generates an ID for the theme and sets the value of the "system" property when the API request to create the theme is processed.

   If you want to specify a master theme, provide the theme name in the masterThemeID property. Master themes are optional, but allow you to identify the Composer-supplied theme from which properties should be inherited by a custom theme, if the properties are not specified in the custom theme JSON. Master themes can only be Composer- supplied themes. See Supplied Themes.

   The following request creates a theme called mytheme, based on the supplied modern theme, but using the supplied composer theme as its master theme.

   At this time, you can only tailor theme colors. Other tailoring properties (such as fonts or font sizes) should not be changed.

   curl -X POST "<ip-address>:<port>/composer/api/customization/themes" -H "accept: application/vnd.composer.v2+json" -H "Content-Type: application/json" -d "{ \"createdDate\": \"2020-04-29 10:26:17.135\", \"lastModifiedDate\": \"2020-04-29 10:26:18.078\", \"masterThemeId\": \"composer\", \"name\": \"mytheme\", \"content\": { \"customProperties\": { \"about\": { \"color\": \"$colors.text\", \"copyright\": \"$colors.muted\" }, \"buttons\": { \"base\": { \"active\": { \"bg\": \"$colors.intentBaseActive\" }, \"bg\": \"$colors.intentBase\", \"color\": \"$colors.text\", \"hover\": { \"bg\": \"$colors.intentBaseHover\" } }, \"danger\": { \"active\": { \"bg\": \"$colors.intentDangerActive\" }, \"bg\": \"$colors.intentDanger\", \"color\": \"$colors.onPrimary\", \"disabled\": { \"bg\": \"$colors.intentDangerDisabled\" }, \"hover\": { \"bg\": \"$colors.intentDangerHover\" } }, \"disabled\": { \"bg\": \"$colors.intentBaseDisabled\" }, \"minimal\": { \"active\": { \"bg\": \"$colors.intentMinimalActive\" }, \"bg\": \"initial\", \"color\": \"$colors.onSurface\", \"disabled\": { \"color\": \"$colors.intentMinimalDisabled\" }, \"hover\": { \"bg\": \"$colors.intentMinimalHover\" } }, \"primary\": { \"active\": { \"bg\": \"$colors.intentPrimaryActive\" }, \"bg\": \"$colors.intentPrimary\", \"color\": \"$colors.onPrimary\", \"disabled\": { \"bg\": \"$colors.intentPrimaryDisabled\" }, \"hover\": { \"bg\": \"$colors.intentPrimaryHover\" } }, \"success\": { \"active\": { \"bg\": \"$colors.intentSuccessActive\" }, \"bg\": \"$colors.intentSuccess\", \"color\": \"$colors.onPrimary\", \"disabled\": { \"bg\": \"$colors.intentSuccessDisabled\" }, \"hover\": { \"bg\": \"$colors.intentSuccessHover\" } }, \"warning\": { \"active\": { \"bg\": \"$colors.intentWarningActive\" }, \"bg\": \"$colors.intentWarning\", \"color\": \"$colors.onPrimary\", \"disabled\": { \"bg\": \"$colors.intentWarningDisabled\" }, \"hover\": { \"bg\": \"$colors.intentWarningHover\" } } }, \"chartLegend\": { \"background\": \"$colors.background\", \"color\": \"$colors.text\" }, \"chartTooltip\": { \"background\": \"$colors.background\", \"color\": \"$colors.text\" }, \"charts\": { \"base\": { \"axisLabelColor\": \"$colors.text\", \"axisLabelShadow\": \"rgba(255, 255, 255, 0.3)\", \"axisLineColor\": \"$colors.text\", \"color\": \"$colors.text\", \"pointerColor\": \"$colors.text\", \"splitLineColor\": \"$colors.text\" } }, \"checkbox\": { \"background\": \"$colors.background\", \"border\": \"$colors.border\", \"checked\": { \"background\": \"$colors.intentPrimary\", \"border\": \"$colors.intentPrimary\", \"innerBackground\": \"$colors.#fff\" } }, \"colorPalette\": { \"activeIconColor\": \"$colors.text\", \"background\": \"$colors.background\", \"borderColor\": \"$colors.border\", \"draggingBackgroundColor\": \"$colors.background\", \"hover\": { \"background\": \"$colors.intentBaseHover\" }, \"iconColor\": \"$colors.muted\", \"selected\": { \"background\": \"$colors.intentPrimary\" } }, \"dashboard\": { \"background\": \"$colors.background\", \"header\": { \"background\": \"$colors.background\", \"controls\": { \"filterActiveIcon\": \"#68AD45\", \"filterActiveIconHover\": \"#59933b\", \"filterIcon\": \"#939393\", \"filterIconHover\": \"#7a7a7a\" }, \"text\": \"$colors.onSurface\", \"unsavedText\": \"$colors.muted\" } }, \"dashboardList\": { \"background\": \"$colors.background\", \"preview\": { \"background\": \"$colors.surface\", \"border\": \"#E6E6E6\", \"color\": \"#595959\", \"description\": { \"color\": \"#939393\" }, \"details\": { \"propertyColor\": \"#b2b2b2\", \"valueColor\": \"#323232\" }, \"shadow\": \"rgba(0, 0, 0, 0.2) 2px 2px 10px 0px\", \"title\": { \"background\": \"#D2D2D2\", \"color\": \"#595959\" } }, \"sidePane\": { \"background\": \"rgb(89, 89, 89)\", \"color\": \"#d2d2d2\" }, \"topPanel\": { \"background\": \"rgba(230, 230, 230, 0.8)\", \"color\": \"$colors.onBackground\" } }, \"datePicker\": { \"background\": \"$colors.surface\", \"color\": \"$colors.onSurface\", \"divider\": { \"color\": \"$colors.border\" }, \"hover\": { \"active\": { \"background\": \"$colors.intentPrimaryHover\", \"color\": \"$colors.onPrimary\" }, \"background\": \"$colors.intentMinimalHover\", \"color\": \"$colors.onSurface\" } }, \"dialog\": { \"background\": \"$colors.background\", \"color\": \"$colors.text\", \"footerBackground\": \"$colors.backgroundVariant\" }, \"homePage\": { \"color\": \"$colors.text\", \"menuCard\": { \"background\": \"$colors.surface\", \"color\": \"$colors.onSurface\" }, \"title\": \"$colors.muted\" }, \"icons\": { \"base\": { \"color\": \"$colors.intentMinimal\" }, \"danger\": { \"color\": \"$colors.intentDanger\" }, \"primary\": { \"color\": \"$colors.intentPrimary\" }, \"success\": { \"color\": \"$colors.intentSuccess\" }, \"warning\": { \"color\": \"$colors.intentWarning\" } }, \"input\": { \"background\": \"$colors.surface\", \"border\": \"$colors.border\", \"disabled\": { \"background\": \"$colors.intentMinimalDisabled\" }, \"label\": \"$colors.text\", \"placeholder\": \"$colors.muted\", \"text\": \"$colors.text\" }, \"list\": { \"border\": { \"color\": \"$colors.intentBaseActive\" } }, \"loader\": { \"background\": \"rgba(247, 247, 247, 0.75)\" }, \"menu\": { \"active\": { \"bg\": \"$colors.intentBaseActive\", \"color\": \"$colors.text\" }, \"bg\": \"$colors.surface\", \"color\": \"$colors.text\", \"disabled\": \"$colors.intentMinimalDisabled\", \"divider\": { \"color\": \"$colors.border\" }, \"hover\": { \"bg\": \"$colors.intentBaseHover\", \"color\": \"$colors.onSurface\" }, \"icon\": { \"active\": { \"color\": \"$colors.intentSuccess\", \"hover\": { \"color\": \"#59933b\" } }, \"color\": \"$colors.intentMinimal\", \"delete\": { \"hover\": { \"color\": \"$colors.intentWarning\" } }, \"hover\": { \"color\": \"$colors.onSurface\" } } }, \"metaDataPicker\": { \"background\": \"$colors.surface\", \"color\": \"$colors.text\", \"item\": { \"aggrHover\": \"#dedede\", \"border\": \"#dedede\", \"hover\": { \"bg\": \"$colors.intentBaseHover\" } }, \"secondary\": \"$colors.muted\" }, \"modal\": { \"background\": \"$colors.surface\", \"color\": \"$colors.onSurface\" }, \"multiSelect\": { \"background\": \"$colors.surface\", \"color\": \"$colors.text\", \"tagBackground\": \"$colors.backgroundVariant\", \"tagColor\": \"$colors.onBackgroundVariant\" }, \"navbar\": { \"background\": \"$colors.primary\", \"colorInactive\": \"$colors.muted\", \"menu\": { \"background\": \"$colors.primaryVariant\", \"color\": \"$colors.onPrimary\", \"divider\": \"rgba(255, 255, 255, 0.15)\", \"itemActive\": \"$colors.intentPrimary\", \"itemHover\": \"$colors.intentMinimalHover\" }, \"tabActive\": \"rgba(138, 155, 168, 0.3)\", \"tabBorderActive\": \"$colors.secondary\", \"tabFontActive\": \"$colors.onPrimary\", \"tabHover\": \"rgba(138, 155, 168, 0.15)\" }, \"popup\": { \"background\": \"$colors.surface\", \"border\": \"$colors.border\", \"closeBtn\": \"#999999\", \"closeBtnHover\": \"#7a7a7a\", \"color\": \"$colors.text\" }, \"radialMenu\": { \"bg\": \"rgba(0, 0, 0, 0.7)\", \"color\": \"$colors.onPrimary\", \"hover\": { \"bg\": \"#000\" }, \"removeBtn\": { \"bg\": \"#939393\", \"color\": \"$colors.onPrimary\", \"hover\": { \"bg\": \"#E5683A\" } } }, \"radio\": { \"background\": \"$colors.background\", \"border\": \"$colors.border\", \"selected\": { \"background\": \"$colors.intentPrimary\", \"border\": \"$colors.intentPrimary\", \"innerBackground\": \"#fff\" } }, \"resourcesTable\": { \"background\": \"$colors.surface\", \"border\": \"$colors.border\", \"color\": \"$colors.onSurface\", \"header\": { \"background\": \"#e7e7e7 linear-gradient(180deg,#fafafa,#f0f0f0)\", \"color\": \"$colors.text\" }, \"hover\": { \"background\": \"$colors.background\", \"color\": \"$colors.text\" } }, \"schedule\": { \"list\": { \"bg\": \"$colors.surface\", \"border\": \"$colors.border\", \"item\": { \"active\": { \"bg\": \"$colors.intentPrimary\", \"color\": \"$colors.onPrimary\" }, \"bg\": \"$colors.surface\", \"color\": \"$colors.text\", \"hover\": { \"bg\": \"$colors.intentBaseHover\" } } } }, \"select\": { \"background\": \"$colors.surface\", \"border\": \"$colors.border\", \"color\": \"$colors.text\", \"disabled\": { \"background\": \"$colors.intentMinimalDisabled\" } }, \"tables\": { \"base\": { \"background\": \"$colors.surface\", \"backgroundOdd\": \"#fcfdfe\", \"border\": \"#BDC3C7\", \"borderSecondary\": \"#d9dcde\", \"color\": \"$colors.onSurface\", \"heading\": { \"background\": \"$colors.background\", \"color\": \"$colors.text\", \"colorSecondary\": \"$colors.muted\" }, \"hover\": { \"background\": \"#ecf0f1\" } } }, \"thumbnail\": { \"delete\": { \"background\": \"$colors.backgroundVariant\", \"border\": \"$colors.border\", \"color\": \"$colors.onBackgroundVariant\" }, \"fav\": { \"color\": \"#68ad45\" }, \"subTitle\": \"$colors.muted\", \"title\": \"$colors.text\" }, \"timebar\": { \"backgroundColor\": \"#DEDEDE\", \"backgroundColorHover\": \"rgba(167,182,194,0.3)\", \"border\": \"$colors.border\", \"scrubber\": { \"animatedTickColor\": \"#b1bfd2\", \"backgroundColor\": \"#b1bfd2\", \"backgroundColorHover\": \"rgba(167,182,194,0.3)\", \"datePickerBackgroundColorMaximized\": \"$colors.intentPrimary\", \"datePickerBackgroundColorMinimized\": \"#b1bfd2\", \"datePickerColorMaximized\": \"$colors.intentPrimary\", \"datePickerColorMinimized\": \"#ffffff\", \"splitterColor\": \"$colors.border\", \"splitterColorHover\": \"$colors.border\", \"textColor\": \"#333333\", \"textColorHover\": \"#b1bfd2\", \"tickColor\": \"$colors.intentPrimary\", \"tickColorHover\": \"#b1bfd2\", \"tooltipDatePickerBackgroundColor\": \"$colors.intentPrimary\", \"tooltipDatePickerColor\": \"#555555\" }, \"textColor\": \"$colors.text\", \"textColorHover\": \"$colors.text\" }, \"toast\": { \"danger\": { \"bg\": \"$colors.intentDanger\", \"color\": \"$colors.text\" }, \"primary\": { \"bg\": \"$colors.intentPrimary\", \"color\": \"$colors.text\" }, \"success\": { \"bg\": \"$colors.intentSuccess\", \"color\": \"$colors.text\" }, \"warning\": { \"bg\": \"$colors.intentWarning\", \"color\": \"$colors.text\" } }, \"tooltip\": { \"background\": \"$colors.primaryVariant\", \"color\": \"$colors.onPrimary\" }, \"visualEditor\": { \"background\": \"$colors.background\", \"borderColor\": \"$colors.border\", \"color\": \"$colors.text\", \"list\": { \"background\": \"$colors.intentBase\", \"borderColor\": \"$colors.border\", \"secondaryBackground\": \"$colors.intentBaseActive\" }, \"secondaryColor\": \"$colors.muted\" }, \"widget\": { \"background\": \"$colors.surface\", \"borderColor\": \"$colors.surface\", \"iconColor\": \"$colors.muted\", \"label\": { \"background\": \"$colors.background\", \"color\": \"#323232\", \"hover\": { \"background\": \"#d8d8d8\" } }, \"selected\": { \"borderColor\": \"$colors.accentColor\" }, \"titleColor\": \"$colors.text\" } }, \"variables\": { \"breakpoints\": [ \"320px\", \"568px\", \"768px\", \"1024px\", \"1200px\" ], \"colors\": { \"accentColor\": \"rgba(19, 124, 189, 0.5)\", \"background\": \"#f7f7f7\", \"backgroundVariant\": \"#dedede\", \"border\": \"#cccccc\", \"intentBase\": \"#f7f7f7\", \"intentBaseActive\": \"#dedede\", \"intentBaseDisabled\": \"#e8e8e8\", \"intentBaseHover\": \"#f0f0f0\", \"intentDanger\": \"#db3737\", \"intentDangerActive\": \"#c23030\", \"intentDangerDisabled\": \"#a82a2a\", \"intentDangerHover\": \"#f55656\", \"intentMinimal\": \"#5c7080\", \"intentMinimalActive\": \"rgba(115, 134, 148, 0.3)\", \"intentMinimalDisabled\": \"rgba(167, 182, 194, 0.6)\", \"intentMinimalHover\": \"rgba(167, 182, 194, 0.3)\", \"intentPrimary\": \"#137cbd\", \"intentPrimaryActive\": \"#0e5a8a\", \"intentPrimaryDisabled\": \"rgba(19, 124, 189, 0.5)\", \"intentPrimaryHover\": \"#106ba3\", \"intentSuccess\": \"#94b845\", \"intentSuccessActive\": \"#15b371\", \"intentSuccessDisabled\": \"#0a6640\", \"intentSuccessHover\": \"#3dcc91\", \"intentWarning\": \"#d9822b\", \"intentWarningActive\": \"#bf7326\", \"intentWarningDisabled\": \"#a66321\", \"intentWarningHover\": \"#f29d49\", \"muted\": \"#999999\", \"onBackground\": \"#182026\", \"onBackgroundVariant\": \"#4a4a4a\", \"onPrimary\": \"#fff\", \"onSurface\": \"#182026\", \"primary\": \"#182026\", \"primaryVariant\": \"#30404d\", \"secondary\": \"#94b845\", \"surface\": \"#fff\", \"text\": \"#4a4a4a\" }, \"fontSizes\": [ 12, 14, 16, 18, 24, 32, 48, 64, 72 ], \"fontWeights\": { \"bold\": 700, \"heading\": 500, \"lightest\": 100, \"normal\": 400 }, \"fonts\": { \"body\": \"\\\"Source Sans Pro\\\", system-ui, sans-serif\", \"heading\": \"\\\"Source Sans Pro\\\", system-ui, sans-serif\", \"monospace\": \"Monaco, Menlo, \\\"Ubuntu Mono\\\", Consolas, source-code-pro, monospace\" }, \"lineHeights\": { \"body\": 1.25, \"heading\": 1.125 }, \"links\": { \"primary\": { \"color\": \"intentPrimary\" } }, \"radii\": { \"default\": 3, \"lg\": 3.6, \"none\": 0, \"pill\": 600, \"sm\": 2.4 }, \"shadows\": {}, \"sizes\": { \"lg\": 736, \"md\": 532, \"sm\": 288, \"xl\": 960, \"xxl\": 1136 }, \"space\": [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ] } }}"

   where <ip-address> is the IP address or host name of your Composer instance and <port> is its port.

   After the theme is successfully created, it shows up in the list of available themes when one is generated (see Listing Themes) and it can be updated and patched (see Updating a Theme and Patching a Theme). It can also be deleted (see Deleting a Theme). However, it will not be used by the Composer UI until it has been activated (see Activating a Theme).