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.
Apply a style to every symbol
Style one symbol the way you want the display to look, then click Apply to all symbols at the bottom of the Style section. Every other Vision Library+ symbol on the display takes the same style in one step, and a short message under the button reports how many symbols were updated.
What is copied:
- The Theme.
- The Surface, but only when the symbol you started from offers one. Applying from a table leaves each chart's own Surface untouched.
- The Container Style, except on symbols that do not offer one. Value+ takes the Theme only.
- The display background, which changes to the color that belongs to the theme, so the whole display matches rather than the symbols alone. Transparent has no background color of its own and leaves the display background as it is, and so does a corporate theme whose administrator did not give it one. When the display already has the theme's color, nothing changes.
What is not copied:
- Custom styling. Custom colors and fonts are saved on each symbol individually, so there is nothing to carry across. While Custom is selected the button is disabled and its tooltip explains why.
- The table Comfortable setting, which is a table-only density option rather than part of the shared style.
- Symbols that are not Vision Library+ symbols, such as PI Vision's own Value, Trend, or Table symbols, and any symbol placed inside a PI Vision Collection.
The symbol you started from is left as it is, and PI Vision's own Undo reverts the whole batch - the display background included - in one step. Nothing is saved until you save the display.
Selecting a theme on one symbol changes that symbol only. The display background follows a theme exclusively through Apply to all symbols.
Choose a theme
| Theme | Appearance and typical use |
|---|---|
| Corporate themes (names set by your administrator) | Always shown first in the grid. Your administrator can define several of them in the Vision Library+ configuration file, each with its own name and company palette. Until at least one is enabled, a single greyed-out swatch is shown in that first position and cannot be selected; its tooltip reads "Not configured. Your PI Vision administrator can enable the corporate theme in the Vision Library+ config.js file." |
| 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. Apply to all symbols gives the display a background one shade darker than PI Vision's own, so the symbols read as surfaces on top of it rather than blending into it. |
| 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.
Your administrator can also remove some of the built-in themes from the grid, so you may see fewer than the themes listed above. A symbol that was already saved with a removed theme keeps it: the symbol renders exactly as before, and its own configuration pane still shows and highlights that theme so you can see what is applied. The theme disappears from that symbol's grid once you choose a different one.
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. New KPI Card+ and Navigation Menu+ symbols start with the Steel Blue theme and a Gradient surface instead; Navigation Menu+ also starts with the Flat container. Menus you have already saved keep their own colors and chrome. Existing card-based symbols receive the same one-time Flat-container baseline, but any later container selection remains unchanged. Manual Input Form+ also starts with the Flat container, and forms you saved before shared styling take that same Flat container the next time the display is opened; a container you choose afterwards is saved and kept. Existing symbols that predate shared styling still resolve a missing theme as Custom and retain their saved appearance. If your administrator later switches a corporate theme off, symbols saved with it render with the PI Vision palette and the pane highlights PI Vision; the saved selection is not changed, so the company look returns as soon as the theme is enabled again. 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.
Alarm Sound+ and Web View+ do not use the shared styling controls because their existing presentation or browser behavior needs to remain independent. Value+ takes the Theme only, as described above.
