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'}}
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
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'}
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'}
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'}
$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.