Themes and corporate design¶

The report follows the app's light and dark switch and takes PSU's colours: the neutral greys of PSU's pages and MUI's primary blue. -Theme Light or -Theme Dark pins it.

A corporate design comes from the app's stylesheet: CSS custom properties on the page root, per mode. The report reads the same --psu-chart-* properties as the ECharts module (series colours, text, axis, grid, accent), so one stylesheet themes the charts and the pivot report together. --psu-pivot-* properties set what only the report has (surfaces, totals, heatmap) or give the report a value of its own; a --psu-pivot-* property wins over its --psu-chart-* counterpart.

One stylesheet for ECharts and the pivot report¶

/* corporate.css: dark blue and orange */
:root {
    --psu-chart-1: #003b6f;
    --psu-chart-2: #f28c28;
    --psu-chart-3: #5b8db8;
    --psu-chart-4: #b35c00;
    --psu-chart-text: #1f2430;
    --psu-chart-muted: #4a5263;
    --psu-chart-axis: #c5ccd6;
    --psu-chart-grid: #e6eaf0;
    --psu-chart-accent: #003b6f;
    --psu-pivot-total: #eef2f7;
    --psu-pivot-heat-high: #003b6f;
}

:root[data-theme="dark"] {
    --psu-chart-1: #6fa8dc;
    --psu-chart-2: #f6b26b;
    --psu-chart-3: #9fc5e8;
    --psu-chart-4: #e69138;
    --psu-chart-text: #e6e9ef;
    --psu-chart-muted: #a9b1bf;
    --psu-chart-axis: #3a4150;
    --psu-chart-grid: #262b33;
    --psu-chart-accent: #6fa8dc;
    --psu-pivot-total: #1a1f27;
    --psu-pivot-heat-high: #6fa8dc;
}

The first block is the light mode, the second the dark one. Each mode needs its own values: a property set only in :root applies to both modes, and a dark text colour from the light block would be unreadable on the dark report. Colours are hex or rgb()/rgba(): the report's chart hands the series colours to ECharts, which does not read every CSS colour syntax.

Adding the stylesheet to an app¶

Put the file into a published folder and name it in New-UDApp -Stylesheets:

# publishedFolders.ps1
New-PSUPublishedFolder -RequestPath '/assets' -Path 'C:\ProgramData\UniversalAutomation\Assets'

# the app
New-UDApp -Title 'Reports' -Stylesheets @('/assets/corporate.css') -Pages @( ... )

For a single page, or to try values out, a <style> element on the page works the same way:

New-UDHtml -Markup '<style>:root { --psu-chart-1: #003b6f; } :root[data-theme="dark"] { --psu-chart-1: #6fa8dc; }</style>'

The properties apply to every chart and report of the page, so this site shows no live example of them.

Properties¶

The light and dark columns are the values without a corporate stylesheet. "Falls back to" is the property used when the first one is not set; without either the default applies.

The report's chart has eight series colours: --psu-chart-9 ... --psu-chart-12 colour only ECharts charts. --psu-chart-tooltip, --psu-chart-tooltip-border and --psu-chart-font-size are ECharts only as well; the report's tooltips use --psu-pivot-surface-raised.

Without a corporate accent the highlight, drop zone and note colours keep PSU's values; with one (--psu-pivot-accent or --psu-chart-accent) they are mixed from it, so they match. Set --psu-pivot-accent-text whenever the accent is light in the light mode or dark in the dark mode: the default text on the accent is white in light mode and near-black in dark mode.

Light and dark¶

The report takes light or dark from PSU's <html data-theme> and switches with the app's toggle, the table and the chart at once, without a reload, and keeps the reader's view (Views); undo and redo start over. The properties are inherited from the page root, so the report sees the values of the page's current mode: those in :root[data-theme="dark"] while the app is dark, those in :root while it is light.

A report pinned with -Theme Light or -Theme Dark still sees the values of the page's mode. To give a pinned dark report its own values in a light app, set them on the report:

.ud-pivot-report [data-pk-theme="dark"] { --psu-chart-text: #e6e9ef; --psu-chart-muted: #a9b1bf; --psu-chart-accent: #6fa8dc; }

Next: Views, Templates, view files and roles, Events, security and limits, Reference.