Themes
Universal Dashboard v3 is built on Material UI. Material UI provides a built-in theme system that UD now takes advantage of. You can utilize this theme system by providing a hashtable of options to the New-UDDashboard 's -Theme parameter.
Here's an example of changing the theme's main color.
1
$Theme = @{
2
palette = @{
3
primary = @{
4
main = '#111111'
5
}
6
}
7
}
8
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
9
New-UDButton -Text "Test " -OnClick {
10
Show-UDToast -Message 'HEllo'
11
}
12
}
Copied!

Setting the default theme

You can set the default theme to either Light or Dark using the -DefaultTheme parameter.
1
New-UDDashboard -Title 'Hello' -Content {
2
New-UDButton -Text "Test " -OnClick {
3
Show-UDToast -Message 'HEllo'
4
}
5
} -DefaultTheme dark
Copied!

Changing the background color

You can change the page background color by setting the background default color. To adjust the header background color, set the primary main color.
1
$Theme = @{
2
palette = @{
3
primary = @{
4
main = '#876a38'
5
}
6
background = @{
7
default = '#876a38'
8
}
9
}
10
# typography = @{
11
# fontSize = 20
12
# }
13
}
14
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
15
New-UDButton -Text 'Hello'
16
}
Copied!

Supporting dark and light palettes

To support dark and light palettes, you can define a dark and light sections in your hashtable. They have the same properties as a theme.
1
$Theme = @{
2
light = @{
3
palette = @{
4
primary = @{
5
main = "#fff"
6
}
7
}
8
}
9
dark = @{
10
palette = @{
11
primary = @{
12
main = "#333"
13
}
14
}
15
}
16
}
17
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
18
New-UDButton -Text 'Hello'
19
}
Copied!

Changing the font size

To change the font size, set the typography fontSize property.
1
$Theme = @{
2
typography = @{
3
fontSize = 20
4
}
5
}
6
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
7
New-UDButton -Text 'Hello'
8
}
Copied!

Changing default button colors

1
$Theme = @{
2
palette = @{
3
grey = @{
4
'300' = '#000'
5
}
6
}
7
}
8
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
9
New-UDButton -Text 'Small Button'
10
}
Copied!
For a full list of options available for the theme system, you can look at the default theme for Material UI.
Last modified 6mo ago