Create Custom HTML Themes

CH5 Components are HTML components. The visual skin and other style of these components are controlled with CSS Styles called Themes.

Crestron provides three standard themes for CH5 components.

Light theme: Dark text on light backgrounds
Dark theme: Light text on dark backgrounds
High-contrast theme: To aid visually impaired, easy to discern colors with larger fonts

Crestron also provides a Theme Builder tool to allow integrators and project designers to customize the standard CH5 themes.

As of Crestron HTML5 User Interface v2.9, CH5 components will be built with CSS variables for efficient development and maintenance of themes. CSS variables allow a value to be stored in one place and referenced in multiple other places in the code. CSS variables also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor such as SCSS). There are no backward compatibility issues with or changes required to existing CH5 code.

Refer to the following example images from the Showcase Application showing the difference between the existing CSS classes and the new CSS variables.

Existing CSS Classes (CH5 v2.8 and Lower)

New CSS Variables (CH5 v2.9 and Higher)

This section provides the following information:

Have feedback on this document? Contact docfeedback@crestron.com.

All brand names, product names and trademarks are the property of their respective owners. Certain trademarks, registered trademarks, and trade names may be used to refer to either the entities claiming the marks and names or their products. Crestron disclaims any proprietary interest in the marks and names of others. Crestron is not responsible for errors in typography or photography. Specifications are subject to change without notice.