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.

$Theme = @{
palette = @{
primary = @{
main = '#111111'
}
}
}
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
New-UDButton -Text "Test " -OnClick {
Show-UDToast -Message 'HEllo'
}
}

Setting the default theme

You can set the default theme to either Light or Dark using the -DefaultTheme parameter.

New-UDDashboard -Title 'Hello' -Content {
New-UDButton -Text "Test " -OnClick {
Show-UDToast -Message 'HEllo'
}
} -DefaultTheme dark

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.

$Theme = @{
palette = @{
primary = @{
main = '#876a38'
}
background = @{
default = '#876a38'
}
}
# typography = @{
# fontSize = 20
# }
}
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
New-UDButton -Text 'Hello'
}

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.

$Theme = @{
light = @{
palette = @{
primary = @{
main = "#fff"
}
}
}
dark = @{
palette = @{
primary = @{
main = "#333"
}
}
}
}
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
New-UDButton -Text 'Hello'
}

Changing the font size

To change the font size, set the typography fontSize property.

$Theme = @{
typography = @{
fontSize = 20
}
}
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
New-UDButton -Text 'Hello'
}

Changing default button colors

$Theme = @{
palette = @{
grey = @{
'300' = '#000'
}
}
}
New-UDDashboard -Theme $Theme -Title 'Hello' -Content {
New-UDButton -Text 'Small Button'
}

‚Äč

For a full list of options available for the theme system, you can look at the default theme for Material UI.