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.

You can apply styles to individual components within Universal Dashboard by using the UDStyle component. This component will need to be added to your dashboard and is part of the core components included with PowerShell Universal.

Applying a Style

To apply a style to a component or a set of components, you call the New-UDStyle cmdlet, specify a CSS style and then include the components you wish to style within the -Content script block.

New-UDStyle -Style '
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    &:hover {
      color: white;
    }
    .card {
        background-color: green !important;   
    }' -Content {
        New-UDCard -Title 'Test' -Content {
            "Hello"
        }
    }

Overriding Built in Styles

Each Material UI component has a set of built in classes that you can override using New-UDStyle. To determine the class names that you need to override, you can view the API documentation for the component you are trying to modify on the Material UI site. For example, here is a listing of the Alert component's CSS class names.

When using a success alert, you will have the .MuiAlert-standardSuccess class applied to your component. You can override this default style like this.

New-UDStyle -Style '.MuiAlert-standardSuccess { background-color: red !important;  }  ' -Content {
    New-UDAlert -Text "Hello"
}

The resulting alert will be red instead of the default green.

You can use a cascading style sheet (CSS) by add a .css file to a published folder and then passing it to the -Stylesheets parameter for New-UDDashboard.

For example, the dashboard.ps1 file would look like this.

New-UDDashboard -Title "Server Monitor" -Content {


} -Stylesheets @("/assets/theme.css")

You could then setup a published folder to provide the assets route. This is what the contents of publishedFolders.ps1 will look like.

New-PSUPublishedFolder -RequestPath "/assets" -Path "C:\assets"

Within the C:\assets folder, you can place any assets you'd like to access on the /assets route.

You can then create a style sheet to manipulate whatever portion of the dashboard you'd like.

.ud-dashboard > div {
    background-image: url("/assets/image.jpeg");
}

This produces a dashboard with a background image of Austin the dog sleeping in a pile of dirt.

Determining the Correct Class Names

Every Material UI component has a series of global class names that you can use to apply styles throughout your dashboard. To determine the correct class names, you can view the a particular component's API documentation. There is a list of the global class names that apply to that component.

For example, here is the CSS documentation for the Alert component.

Within your CSS file, you can use these class names to override styles throughout your dashboard. If you wanted to set all success alerts to have a red background, you could create a CSS file like this.

.MuiAlert-standardSuccess { background-color: red !important;  }