# Themes

Universal Dashboard v3 is built on Material UI. Material UI provides a [built-in theme system ](https://material-ui.com/customization/theming/)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' 
}
```

![](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MHIPutwCbk2BGivMtk8%2F-MHIVobDuP0Dk38BBssH%2Fimage.png?alt=media\&token=a75965c8-74fc-40d6-bffc-e32db1e67fbe)

## 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' 
}
```

![](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MHIPutwCbk2BGivMtk8%2F-MHIX0Qaew4TJl2HdLhS%2F3yIzYxdOaa.gif?alt=media\&token=def62e12-8faf-4079-8dc8-ace6859db105)

## 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' 
}
```

![](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MHIPutwCbk2BGivMtk8%2F-MHIWBm4Q09GWnmBxfXS%2Fimage.png?alt=media\&token=adca0b20-7df2-43b4-b9f0-228c8316bec8)

## Changing default button colors

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

![](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MHIPutwCbk2BGivMtk8%2F-MHIZkwAkfg1DSjKmzor%2Fimage.png?alt=media\&token=3c6e79da-f9c0-4d8e-a37f-d55862836545)

For a full list of options available for the theme system, you can look at the [default theme for Material UI](https://material-ui.com/customization/default-theme/).