Vision Library+ / Guide
Themes and container styles
Vision Library+ symbols that support shared styling use up to three independent settings: Theme, Surface, and Container Style. Use them to give charts, tables, gauges, forms, and controls a consistent appearance without configuring every color separately.
Overview
Vision Library+ symbols that support shared styling use up to three independent settings: Theme, Surface, and Container Style. Use them to give charts, tables, gauges, forms, and controls a consistent appearance without configuring every color separately.
Choose a theme
| Theme | Appearance and typical use |
|---|---|
| Custom | Uses the colors and font settings saved on the symbol. Choose this when the display requires exact, symbol-specific styling. |
| PI Vision | Uses the familiar PI Vision dark gray palette and Arial font. It is a natural fit for existing PI Vision displays. |
| Steel Blue | Uses a deep blue dashboard palette with a bright blue accent. |
| Graphite | Uses a neutral medium-dark gray palette that works well on the standard PI Vision display background. |
| Midnight | Uses a near-black dashboard palette with restrained borders and a blue accent. It is suited to dense, Grafana-like layouts. |
| Light | Uses white and neutral gray surfaces with dark text. |
| High Contrast | Uses strong black, white, and cyan contrast for displays where visual separation is the priority. |
| Uses white surfaces, black text, and black chart accents for print-friendly output. | |
| Transparent | Removes resting surfaces and borders where the symbol renderer permits, while retaining readable text and interaction states. |
Selecting a named theme changes the effective colors and font, but it does not overwrite the values saved under Custom. Return to Custom to restore those settings.
The theme's foreground color is used for presentation text such as titles, axes, legends, and labels. Operational colors still keep their meaning. Multi-state colors, chart series, thresholds, event severity, gauge ranges, and similar status indicators can therefore remain different from the theme foreground.
Choose a surface
- Flat uses a solid background color from the selected theme.
- Gradient derives a subtle dark gradient from the selected theme automatically.
The Transparent theme does not offer a surface choice because its background remains transparent.
Choose a container style
Container Style controls the outer treatment independently from the selected colors.
| Container Style | Appearance |
|---|---|
| None | No border, shadow, corner treatment, or container padding. |
| Flat | A compact, square-edged panel with a visible border and no shadow. |
| Card | A rounded card with comfortable internal spacing and a restrained shadow. |
| Framed | A compact panel with a stronger border and no shadow. |
| Glass | A rounded, translucent treatment with a deeper shadow. Its effect is most visible over a varied display background. |
The container is applied according to the symbol's structure:
- Charts, gauges, and most controls apply it to the entire symbol.
- Repeated KPI and event-form symbols apply it to each card or event item.
- Tables apply it to the full table, including an attached toolbar, without an extra outer margin.
- Full-bleed controls allow headers and selection regions to span the container. Spacing remains inside the relevant section or item.
Style tables
Tables use Theme and Container Style, but not Surface. Their theme controls the table background, header, alternating rows, filters, group bars, toolbar, text, borders, and interaction colors as one coordinated style.
With a named theme selected, use Comfortable to switch between compact and comfortable row density. With Custom selected, Comfortable is hidden and the configured row and header heights control the density instead.
Custom table styles can be transferred between compatible Vision Library+ tables. Select Copy on the source table, select the target table, and then select Paste.
Common combinations
| Goal | Suggested combination |
|---|---|
| Match a standard PI Vision display | PI Vision + Flat surface + None or Flat container |
| Add neutral panels without making the display very dark | Graphite + Flat surface + Flat container |
| Build a near-black dashboard | Midnight + Flat surface + Flat or Card container |
| Build a light dashboard | Light + Flat surface + Framed container |
| Let the display background show through | Transparent + None container |
Existing displays
Most new symbols start with PI Vision, a Flat surface, and None for the container, so they use the standard PI Vision palette without adding container chrome. Card-based symbols start with the lightweight Flat container so individual cards have clear boundaries. Existing card-based symbols receive the same one-time Flat-container baseline, but any later container selection remains unchanged. Existing symbols that predate shared styling still resolve a missing theme as Custom and retain their saved appearance. For tables created with the retired table themes, Dark is represented by PI Vision, Light is represented by Light, and other saved styles retain their colors under Custom.
Value+, Alarm Sound+, and Web View+ do not use the shared styling controls because their existing presentation or browser behavior needs to remain independent.
