Themes
Universal Dashboard is now a part of PowerShell Universal. This documentation is for reference to the v2 version of Universal Dashboard and is no longer maintained.
Themes
Required Version: 1.4.0 or later
Themes are used to define colors for a dashboard without having to pass colors to each component. Themes can easily be defined as a hashtable and passed into
New-UDTheme. Component and property names can be defined in a theme as well as CSS classes and attributes.Creating a basic theme
To create a basic theme, use
New-UDTheme. Values for any of the attributes can be any valid CSS definition.1
$Theme = New-UDTheme -Name "Basic" -Definition @{
2
UDDashboard = @{
3
BackgroundColor = "rgb(255,255,255)"
4
FontColor = "rgb(0, 0, 0)"
5
}
6
}
Copied!
Themes can then be passed into the
-Theme parameter of New-UDDashboard.Finding pre-defined themes
Universal Dashboard includes pre-defined themes. These themes can be found using the
Get-UDTheme cmdlet. You can use these themes as parents to other themes.Creating child themes
You can create child themes of pre-existing themes returned by
Get-UDTheme. To create a child theme, pass the name of the parent theme to the Parent parameter of New-UDTheme.1
$Theme = New-UDTheme -Name "Basic" -Definition @{
2
UDDashboard = @{
3
BackgroundColor = "rgb(255,255,255)"
4
FontColor = "rgb(0, 0, 0)"
5
}
6
} -Parent "Azure"
Copied!
When defining a child theme, any properties that are defined in the child will override the parent. Any properties that are not overriden, will remain the same as the parent.
Available Properties
Themes support a basic set of defined properties. These properties are translated to CSS classes and attributes for you.
- UDDashboard
- BackgroundColor
- FontColor
- UDNavBar
- BackgroundColor
- FontColor
- UDFooter
- BackgroundColor
- FontColor
- UDCard
- BackgroundColor
- FontColor
- UDChart
- BackgroundColor
- FontColor
- UDCounter
- BackgroundColor
- FontColor
- UDMonitor
- BackgroundColor
- FontColor
- UDGrid
- BackgroundColor
- FontColor
- UDTable
- BackgroundColor
- FontColor
- UDInput
- BackgroundColor
- FontColor
Any of these properties can be used in a theme definition.
1
$Theme = New-UDTheme -Name "Basic" -Definition @{
2
UDDashboard = @{
3
BackgroundColor = "rgb(255,255,255)"
4
FontColor = "rgb(0, 0, 0)"
5
}
6
UDChart = @{
7
BackgroundColor = "blue"
8
}
9
}
Copied!
Using Raw CSS
In addition to the basic theme controls, you can also use CCS in your theme definitions. Both the key and values are translated to CSS selectors and properties.
1
$Theme = New-UDTheme -Name "Basic" -Definition @{
2
'.ud-table' = @{
3
font-size = '20px'
4
font-style = 'italic'
5
}
6
}
Copied!
You can also mix and match the basic options with CSS.
1
$Theme = New-UDTheme -Name "Basic" -Definition @{
2
'.ud-table' = @{
3
font-size = '20px'
4
font-style = 'italic'
5
}
6
UDCard = @{
7
BackgroundColor = 'red'
8
}
9
}
Copied!
Last modified 8mo ago