About Style Themes¶

Themes have a Preview function, where you can get a quick visual representation of exactly how different screens and Panels in Vinyl will look with the selected Theme applied. This guide describes the current implementation of Themes.

If you are running Vinyl 2.2 or earlier, please refer to this Style Themes article.

Overview¶

Vinyl allows the customization of how an app visually appears in the Application Layer through leveraging Style Themes. In Vinyl, Themes are defined pairings of Components and Value Types which allow you to control the appearance of defined areas of the Application Layer UI and UX. A Component here represents an area in the Application Layer UI that can have its properties changed, for example Page is a Component. Value Types represent the specific properties that can be changed or defined, for example Background color is a Value Type.

For example: Set the Background color [Value type] of the Links [Interface] to be purple.

Several predefined Base Themes are shipped with Vinyl which can easily be used by your application as is, or leveraged as a Base Theme which you can further customize. As well, the following options are available through Themes:

• Theme setting types are available to configure Alignment, Spacing, and CSS Transitions
• The following new areas of Pages from Vinyl are exposed to be customized via Themes:
  • Chart, Map and Calendar Real Estate areas
  • Tile margin on Boards/Lanes, Tile centering in a Panel
  • Multi-row Panel Control Sets, headers and cells (allowing larger MRP rows)
  • Validations (Errors, warnings, prompts and exceptions presented to the user)
  • Back button
  • Load more rows button
• Ability to Hide Toolbar if all intrinsic controls are hidden, including disabling count
• Close button ('x') is now part of the Panel and can be styled similarly
• Support panel visibility that hides the Panel but reserves the space (value of "3")
• Can now hide Panel Headers, or adjust their size via Formats
• Site level fonts can be loaded remotely

Theme-less State¶

Without any Theme information defined and applied, Vinyl at the Application Layer level appears in a theme-less state with minimal stylization. With the use of Themes, a designer can quickly improve the overall look and feel of an app.

Interfaces¶

Creating a brand new Theme and assigning it to an application will not result in any visible changes, since the new Theme has no Implementations. The colors chosen at a Theme level do not automatically apply to any parts of the Application Layer User Interface. In order to see custom colors through the Application Layer you need to configure Component Settings. Fig 2 has the Page - Title Bar Component Background Color set to purple for the Links Area.

Components are parts of the UI that can receive style implementations.

Value Types¶

With a Component specified, you can select a Value Type to apply a property. Value Types can refer to font colors, background colors, images, alignment, gradient information, size information, etc. depending on what specific Real Estate area you have selected to customize. On the theme page, each Value Type has corresponding Help text information which contains helpful tips and instructions on what specific information to provide.

Referencing Colors by Reserved Syntax¶

When specifying colors in the Themes area of Vinyl, (border color, background color, etc.) you can reference the name of one of the three colors defined at the Theme level. This allows faster customization when using the Copy feature.

The reserved syntax terms you can specify are:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Adjusting Colors¶

When using reserved names, colors can be adjusted as well for brightness or darkness and opacity.

Colors can be adjusted for brightness or darkness and opacity. This customization is available for the following reserved terms:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

To adjust color brightness and darkness, add a pipe character along with numeric decimal value (positive value to increase or negative value to darken the color). Expected values are -.9 - .9.

Syntax: {PrimaryColor|.25} or {PrimaryColor|-.25}

To adjust color opacity add the tilde character along with a numeric decimal value. Expected values are .1 - .9.

Syntax: {PrimaryColor~.25}

Copy Button¶

Any Theme can be copied. Use this feature if you want to quickly get up and running with a Theme and just set the three colors for Primary, Secondary and Complementary. There are many predefined Themes available that can be selected and used as is or customized further to get up and running quickly.

Vinyl Predefined Themes¶

Vinyl ships with several predefined Themes. Although these are technically editable, when you upgrade any changes will be lost.

Suggestions¶

If you specify a dark Background Color, ensure you use a Font Color that is readable for all text. Take advantage of the text-shadow property included in Font Color to add extra contrast.

Appendix¶

Components¶

Value types¶