Working with Style Themes
A style theme is a collection of style properties that specify the appearance of widgets and other components in a mashup. By default, the PTC Convergence Theme is applied to all new mashups that you create in Composer. The theme is created using PTC Design System principles. You can create and use your own style themes to create mashups and applications that have a consistent look and feel. Style themes include global styles that control the colors, fonts, and line styles of widgets in a mashup. In addition, you can modify more specific styles for elements such as links, buttons, and menus using the editor on the Styles tab of style theme entities in Composer.
You can apply styles to mashups in the following ways:
• Style themes and style properties—Styles for themed widgets within mashups.
• Style definitions—Styles for non-themed and legacy widgets.
 |
Style definitions are used to style themed widgets when a state definition entity is applied to the widget.
|
• Custom CSS—Standard CSS syntax.
Compared to style definitions, theming enables you to:
• Scale your design quickly by applying themes to multiple mashups that are associated with an application.
• Reuse common styles without having to apply state definitions to individual widgets in a mashup.
• Preview styles using a preview mashup on the Styles tab of a style theme entity.
• Export or share style themes to collaborate on application design with others.
Using Style Themes and Style Properties
Style Themes are applied on a mashup level and style properties are applied on a widget level. To override a mashup style theme, edit the style properties of specific widgets using the Style Properties panel in Mashup Builder. Style properties enable you to configure the widget appearance under different states such as active, pressed, and hover. You can use style themes to define a general look for your application, then use the style properties to perform advanced style configurations on individual widgets as required.
Creating Custom Themes
When you create a new style theme, we recommend that you start by duplicating an existing style theme such as the PTC Converge Theme. Then, you can use the style theme editor to customize the global and element styles within the theme to match your design requirements.
Using the Legacy Styles Theme
The default convergence theme applies a more modern and accessible design compared to the style definitions that are applied to legacy widgets. To preserve the look of legacy widgets, apply the Legacy Styles Theme composer entity to a mashup. You can also perform this task using the Mashup Migration dialog box when you migrate a mashup that contains legacy widgets or layouts.
Using Custom CSS
The web component widgets support customizing styles using style themes and widget style properties. PTC does not recommend and support overriding web component styles using custom CSS. The component DOM structure and CSS classes are considered internal implementation details that may change when a new version of ThingWorx Foundation is released.