Work with themes

Get all themes

Stores can use many themes; however, the agent console can only use a single theme. You can review all of the themes available and make modifications as necessary. To see all themes, use the Themes API:

Issue a GET command to get all themes, including the agent theme:

/ccadmin/v1/themes?includeagenttheme=true

Note: If the includeagenttheme query parameter is set to false or omitted, the endpoint will not return the agent theme.

Get the active agent theme

An active theme is a theme that is currently in use. You can issue a GET command to get the active agent theme:

/ccadmin/v1/themes/agentThemeDetails

The response may be something similar to this:

{  
  "isAgentTheme": true,  
  "thumbnail": "",
  "theme_additional_fonts": {},  
  "notes": "This is the Agent Theme.",
  "is_active": false,  
  "theme_styles_color": {    
    "@ButtonPrimarySize": "medium",    
    "@ButtonSecondaryTextDecoration": "none",    
    "@ButtonPrimaryTextColor": "#ffffff",    
    "@SubNavigationTextColor": "#6F7178",    
    "@ButtonPrimaryUseGradient": "false",    
    "@ButtonPrimaryFontStyle": "normal",    
    "@ButtonSecondaryFontFamily": "@sansFontFamily",    
    "@ButtonPrimaryFontWeight": "normal",    
    "@NavbarLinkColor": "#3D3D3D",    
    "@NavbarLinkHoverColor": "#195D8D",    
    "@NavbarTextColor": "#333333",    
    "@mobileNavBarButtonColor": "#333333",    
    "@SubNavigationLinkHoverColor": "#195D8D",    
    "@NavbarBackgroundHoverColor": "#FFFFFF",    
    "@SitePageBorderColor": "#CCD7DF",    
    "@ButtonSecondaryUseGradient": "false",    
    "@LinkVisitedColor": "#195d8d",    
    "@LinkColor": "#195d8d",    
    "@ButtonPrimaryBackgroundColor": "#0572ce",    
    "@NavbarBackgroundColor": "#FFFFFF",    
    "@SubNavigationLinkColor": "#3D3D3D",    
    "@ButtonPrimaryFontFamily": "@sansFontFamily",    
    "@ButtonPrimaryTextDecoration": "none",    
    "@ButtonSecondaryBorderRadius": "4px",    
    "@ButtonSecondaryFontStyle": "normal",    
    "@ButtonSecondaryTextColor": "#3d3d3d",    
    "@SubNavigationBackgroundColor": "#FFFFFF",    
    "@ButtonSecondaryFontWeight": "normal",    
    "@ButtonSecondaryBackgroundColor": "#ffffff",    
    "@ButtonPrimaryBorderRadius": "4px",    
    "@LinkHoverColor": "#114062",    
    "@ButtonSecondarySize": "medium",    
    "@SubNavigationBackgroundHoverColor": "#FFFFFF",    
    "@TextColor": "#000000"
  },  
  "usingCodeView": false,  
  "is_default": false,  
  "associatedSites": [],  
  "theme_styles_typography": {    
    "@H6LineHeight": "150%",    
    "@H5TextDecoration": "inherit",    
    "@H3FontFamily": "inherit",    
    "@H5FontStyle": "inherit",    
    "@H2FontStyle": "inherit",    
    "@H2TextColor": "inherit",    
    "@SiteLineHeight": "150%",    
    "@SiteFontFamily": "@sansFontFamily",    
    "@H1TextAlign": "inherit",    
    "@ParagraphFontWeight": "normal",    
    "@H5FontSize": "1.00rem",    
    "@H4TextAlign": "inherit",    
    "@H1TextDecoration": "inherit",    
    "@H3LineHeight": "150%",    
    "@H2FontWeight": "bold",    
    "@H3FontSize": "1.75rem",    
    "@ParagraphLineHeight": "150%",    
    "@H3TextColor": "inherit",    
    "@H3TextAlign": "inherit",    
    "@H4FontFamily": "inherit",    
    "@SiteFontSize": "14px",    
    "@SiteTextAlign": "left",    
    "@H5FontWeight": "normal",    
    "@H6FontFamily": "inherit",    
    "@H1FontSize": "2.75rem",    
    "@H6FontStyle": "inherit",    
    "@H6TextDecoration": "inherit",    
    "@H2TextDecoration": "inherit",    
    "@ParagraphTextColor": "inherit",    
    "@H1FontStyle": "inherit",    
    "@ParagraphTextAlign": "inherit",    
    "@H4LineHeight": "150%",    
    "@H1FontWeight": "bold",    
    "@SiteTextColor": "#000000",    
    "@ParagraphFontSize": "1.00rem",    
    "@H5FontFamily": "inherit",    
    "@H4FontWeight": "bold",    
    "@ParagraphFontFamily": "inherit",    
    "@H1FontFamily": "inherit",    
    "@H2TextAlign": "inherit",    
    "@H1LineHeight": "150%",    
    "@H6FontSize": "0.85rem",    
    "@H3TextDecoration": "inherit",    
    "@H4TextColor": "inherit",    
    "@ParagraphFontStyle": "inherit",    
    "@ParagraphTextDecoration": "inherit",    
    "@H1TextColor": "inherit",    
    "@SiteTextDecoration": "none",    
    "@H4FontSize": "1.25rem",    
    "@SiteFontStyle": "normal",    
    "@H3FontWeight": "bold",    
    "@H6TextAlign": "inherit",    
    "@H4TextDecoration": "inherit",    
    "@H2FontFamily": "inherit",    
    "@H3FontStyle": "inherit",    
    "@SiteFontWeight": "normal",    
    "@H5LineHeight": "150%",    
    "@H2FontSize": "2.25rem",    
    "@H6TextColor": "inherit",    
    "@H4FontStyle": "inherit",    
    "@H2LineHeight": "150%",    
    "@H5TextColor": "inherit",    
    "@H5TextAlign": "inherit",    
    "@H6FontWeight": "normal"  
}

Clone a theme

To create a new theme, clone an existing theme.

Issue a POST command to:

/ccadmin/v1/themes/<name of theme to clone>/clone
{name: <name of new theme>}

For example:

POST /ccadmin/v1/themes/PrimarySiteTheme/clone
{name:"SecondarySiteTheme"}

Make the modifications to the theme as necessary.
To set the theme as the active agent theme, issue a POST command to:
```
/ccadmin/v1/themes/{id}/setAsAgentTheme
```
For example:
```
POST /ccadmin/v1/themes/SecondarySiteTheme/setAsAgentTheme
```

Important: Once you have cloned a theme, you must use the setAsAgentTheme endpoint to indicate which theme is the assigned theme. This ensures that you do not have multiple agent themes.

Compile a theme

Once you have created a new agent theme and identified it as such, you compile it.

Issue a POST command to:

/ccadmin/v1/themes/compileAgentTheme

For example:

POST /ccadmin/v1/themes/compileAgentTheme

Update theme details

To update the agent theme’s detail, such as the theme name, notes or details about the theme, do the following:

Issue a GET command to:
```
/ccadmin/v1/themes/agentThemeDetails
```
This returns the theme’s details. Update the theme elements as necessary.
Once you have finished making edits, issue a PUT command, with the updated JSON values, to:
```
/ccadmin/v1/themes/agentThemeDetails
```
For example:
```
POST /ccadmin/v1/themes/agentThemeDetails
{"assetType", "pageLayout", "assetId", "404PageLayout"}
```

Update the theme source

Issue GET command to:
```
/ccadmin/v1/themes/agentThemeSource
```
Make the modifications as necessary.
To reload the theme, issue a PUT command with the updated JSON values to:
```
/ccadmin/v1/themes/agentThemeSource
```