Change the Theme

CH5 components are HTML components. The visual skin and other style of these components are controlled with CSS styles called themes.

The template comes with two prebuilt themes: light and dark. The light theme is used by default. To change between the prebuilt themes, set selectedTheme within project‑config.json to either "light-theme" or "dark-theme".

The existing themes can be further modified using various methods. For example, if a new theme is created using the CH5 Theme Editor , this theme can be used within the Crestron Template Project directly. The following theme applications are supported:

  • Use Crestron-provided themes (light, dark, or high-contrast)
  • Extend Crestron-provided themes in the Crestron Template Project.
  • Use custom themes created using the CH5 Theme Editor.
  • Extend custom themes in the Crestron Template Project.

The "name" key indicates the name of the theme. The "extends" key in the theme's array contains the name of the base themes (light, dark, high‑contrast). Project-specific themes can extend base themes to follow the respective theme colors and values.

Refer to the following sample code for various examples of how themes can be configured with the project-config.json file.

Copy 
  "selectedTheme": "light-theme",
  "themes": [
    {
      "name": "light-theme",
      "extends": "light-theme",
      "brandLogo": {
        "url": "./app/template/assets/img/ch5-logo-light.svg",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "backgroundColor": [
          "#f8f8f8"
        ]
      }
    },
    {
      "name": "dark-theme",
      "extends": "dark-theme",
      "brandLogo": {
        "url": "./app/template/assets/img/ch5-logo-dark.svg",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "backgroundColor": [
          "#1a1a1a"
        ]
      }
    },
    {
      "name": "project-light-theme",
      "extends": "light-theme",
      "brandLogo": {
        "url": "./app/template/assets/img/ch5-logo-light.svg",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "backgroundColor": [
          "#f8f8f8"
        ]
      }
    },
    {
      "name": "project-dark-theme",
      "extends": "dark-theme",
      "brandLogo": {
        "url": "./app/template/assets/img/ch5-logo-dark.svg",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "backgroundColor": [
          "#1a1a1a"
        ]
      }
    },
    {
      "name": "project-custom-theme",
      "extends": "light-theme",
      "brandLogo": {
        "url": "./app/template/assets/img/ch5-logo-light.svg",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "backgroundColor": [
          "#f8f8f8"
        ]
      }
    }
  ],

To generate a completely custom look and feel, refer to Create Custom HTML Themes.