/* Taller header logo with extra right-side spacing. */.vpc-logo { height: 32px; margin-right: 12px;}/* Square compact mark for the collapsed sidebar. */.vpc-label-logo { width: 32px; height: 32px; object-fit: contain;}/* Tint a monochrome SVG to match the brand accent. Works only if the SVG uses fill="currentColor" or its paths are unstyled. */.vpc-logo { color: #0a6ec8;}.vpc-logo path { fill: currentColor;}/* Reach a region the palette can't recolor: the data table pinned column shadow. */.MuiDataGrid-pinnedColumns { box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);}
CSS override tips
Keep the header logo height between 24 and 36 pixels. Larger values increase the header height and break the vertical alignment with the navigation icons.
The compact logo (
.vpc-label-logo
) is only visible when the sidebar is collapsed. Verify both the expanded and collapsed states after editing.
Prefer SVGs that use
fill="currentColor"
or unstyled paths, so a single CSS rule can recolor them and they respect the active light or dark scheme.
For data table tweaks beyond what the palette allows, target
.MuiDataGrid-*
selectors.
Theme palette structure
The
palette.json
file defines two color schemes,
light
and
dark
. End users switch between them from the Theme option in the user menu. Both schemes accept the same set of keys.The default palette file has the following contents:
You don't need to provide every key. If you omit a key, Unity Dashboard uses the bundled default. A minimal palette can override only
primary.main
,
primary.contrastText
,
background.paper
, and
background.datagridHeader
and inherit the rest.
Palette keys
The following keys are read from the palette and applied to Unity Dashboard.
Brand and accent
Key
Effect
primary.main
Brand accent for calls to action, avatars, links, and the selected-tab underline.
primary.dark
Hover and active state of contained primary buttons.
primary.contrastText
Text color on contained primary buttons.
primary.lighter
Background of the selected row in data tables.
common.black
,
common.white
Initials text on avatars and certain icon fills.
Backgrounds and surfaces
Key
Effect
background.default
Application canvas behind page content.
background.paper
Cards, panels, headers, sidebars, popovers, modals, table body cells, and side panels. The most-visible surface.
background.paperElevation0
Background of a table row under the cursor.
background.modalElevation
Dialogs and modals, including the table column menu and filter panel.
background.datagridHeader
Table column header row, pagination footer, and pinned header background.
Text
Key
Effect
text.primary
Page titles, body text, primary navigation labels, and table content.
text.secondary
Section labels, captions, email addresses, and descriptive copy.
Dividers and overlays
Key
Effect
divider
Borders between elements, plus the chip background in tables.
dividerElevation0
Border of elevated popovers and table menus.
action.hover
Translucent hover tint on icon buttons.
action.selected
Background tint on the selected secondary navigation item.
action.disabled
Disabled control affordance.
Status colors
Key
Effect
error.main
Notification badge, error states, and the In review status.
warning.main
Warning states and the Draft status.
success.main
Success states, the organization icon, and the Approved status.
Neutral ramp
The
grey.50
through
grey.900
keys define the neutral color ramp for components that read
grey.*
directly. Provide all 10 steps to keep the ramp continuous.
Palette tips
Choose
background.paper
first, because it paints the most-visible surface (header, sidebars, popovers, table cells, side panels).
Set
background.default
and
background.paper
to slightly different values (a 5–10% lightness step) so the page reads as elevated. Identical values look flat.
Set
background.datagridHeader
to a value that differs from
background.paper
, so the table header doesn't disappear into the table body.
primary.main
controls more than buttons. It also paints avatars, links, and the selected-tab underline. Avoid pure-saturated brand reds because they collide with
error.main
.
primary.lighter
is the selected-row background. Keep it visibly tinted but soft enough that the text on top stays readable.
divider
doubles as the chip background in tables, so don't make it strongly chromatic.
Where each palette key paints
The following screenshots show every region that each
palette.json
slot paints. They were captured with a demonstration palette where each slot has a unique color, so each region is visually distinct. In a real palette, regions that share a slot share the same color.The demonstration palette uses these colors:
background.paper
: light amber
#fff8e1
, dark deep purple
#4a148c
background.default
: light blue
#e3f2fd
, dark navy
#1a237e
background.datagridHeader
: light lavender
#e1bee7
, dark deep red
#b71c1c
background.paperElevation0
(row hover): light peach
#ffccbc
, dark teal-green
#00695c
background.modalElevation
: light mint
#c8e6c9
, dark dark cyan
#006064
primary.main
: hot pink
#ff007f
in both schemes
primary.lighter
(selected row): light very-light pink
#fce4ec
, dark deep magenta
#5a0030
divider
: orange
#ff9800
in both schemes
dividerElevation0
: amber
#ffd54f
in both schemes
text.primary
: light navy
#1a237e
, dark yellow
#ffeb3b
text.secondary
: light teal
#00695c
, dark light-teal
#80cbc4
action.selected
: orange
#ff9800
translucent in both schemes
action.hover
: yellow
#ffeb3b
translucent in both schemes
error.main
: red
#f44336
.
warning.main
: amber
#ffc107
.
success.main
: green
#4caf50
Unity Dashboard shell
The standard signed-in view: top bar, primary navigation, secondary navigation, and content area.
The numbered regions in the screenshots use these palette keys:
Top bar:
background.paper
Main content canvas behind cards and panels:
background.default
Primary and secondary navigation sidebars:
background.paper
Background of the selected primary navigation item:
action.selected
, applied as a translucent tint over
background.paper
Section labels in the sidebars (such as Administration, Organization, and Licensing):
text.secondary
Primary navigation labels:
text.primary
Outlined call-to-action button text and border:
primary.main
Borders between rows in the info card:
divider
Organization icon background:
success.main
Notification unread badge:
error.main
User menu popover
The popover that opens from the user avatar in the upper-right corner.
The numbered regions in the screenshots use these palette keys:
Popover surface:
background.paper
Popover outer border:
divider
Avatar circle when no photo is set:
primary.main
. Initials text:
common.white
User display name:
text.primary
Email address:
text.secondary
Menu item labels:
text.primary
Backdrop dim behind the popover: a semi-transparent overlay that doesn't come from
palette.json
Members table
The Members tab under Administration > Settings. This table uses the shared application table component.
The numbered regions in the screenshots use these palette keys:
Selected tab indicator (the Members underline):
primary.main
Toolbar above the table (filter and search):
background.paper
Column header row:
background.datagridHeader
Body cells:
background.paper
Border between rows:
divider
Member avatar in the cell:
primary.main
Member name:
text.primary
Email address:
text.secondary
Role and type chip background (such as User and Owner):
divider
Roles list text:
text.primary
Groups table
The Groups tab under Administration > Settings.
The numbered regions in the screenshots use these palette keys:
The list view of All assets in Asset Manager. This view is rendered by the embedded Asset Manager submodule, which inherits the Unity Dashboard palette.
The numbered regions in the screenshots use these palette keys:
Contained primary call-to-action button (+ Add):
primary.main
Toolbar (search, filters, view switcher):
background.paper
Column header row:
background.datagridHeader
Row under the cursor:
background.paperElevation0
Pagination footer:
background.datagridHeader
Right context panel (summary and recent activity):
background.paper
Body cell:
background.paper
Row borders:
divider
Selected row and side panel
The state when a row is selected in the asset list, which opens the side panel and the selection toolbar.
The numbered regions in the screenshots use these palette keys:
Selected row background:
primary.lighter
Selected row checkbox:
primary.main
Selection toolbar (1 selected, Link, Download, and so on):
background.paper
Contained primary call-to-action button in the toolbar (Open):
primary.main
Side panel surface:
background.paper
Section labels in the side panel (Description, Status, Projects):
