[PSU 2.2.1] - Overriding MuiAppBar color via CSS in Dashboard

PowerShell Universal Universal Dashboard
1

Hey, all.

I’m fairly new to PSU and have far more experience with PowerShell itself, but not so much with MUI or CSS.

I managed to get a decent light/dark theme going but want the header AppBar background color to be the same for both themes. OK, so change the Main color in the theme. Easy, right? Well, turns out there’s not enough contrast there for all the other items that inherit the Main color. So I tried the below, and it still loads fine but with the lighter Main color in the AppBar.

Here’s the Theme hashtable I’ve been passing into New-UDDashboard:

$Theme = @{
    typography = @{
        fontSize = 14
        fontFamily = "'Roboto Regular', Corbel, 'Calibri Light', sans-serif"
        fontWeightLight = 300 
        fontWeightRegular = 400
        fontWeightMedium = 400
        fontFamilySecondary = "'Roboto Light', Roboto, Corbel, 'Calibri Light', sans-serif"
    }
    light = @{
        palette = @{
            text = @{
                primary = "rgba(0, 0, 0, 0.87)"
                secondary = "rgba(0, 0, 0, 0.54)"
                disabled = "rgba(0, 0, 0, 0.38)"
                hint = "rgba(0, 0, 0, 0.38)"
                body2 = "rgba(0, 0, 0, 0.54)"
            }
            primary = @{
                light = "#006AC3"
                main = "#006AC3"
                dark = "#006AC3"
                contrastText = "#fff"
            }
            secondary = @{
                light = "#006AC3"
                main = "#006AC3"
                dark = "#006AC3"
                contrastText = "#fff"
            }
            error = @{
                light = "#B91A0E"
                main = "#B91A0E"
                dark = "#B91A0E"
                contrastText = "#fff"
            }
            grey = @{
                '300' = '#006AC3'
            }
        }
    }
    dark = @{
        palette = @{
            text = @{
                primary = "#fff"
                secondary = "rgba(255, 255, 255, 0.7)"
                disabled = "rgba(255, 255, 255, 0.5)"
                hint = "rgba(255, 255, 255, 0.5)"
                icon = "rgba(255, 255, 255, 0.5)"
            }
            background = @{
                paper = "#424242"
                default = "#303030"
            }
            primary = @{
                light = "#40ABF7"
                main = "#51B5E0"
                dark = "#40ABF7"
                contrastText = "#fff"
            }
            secondary = @{
                light = "#40ABF7"
                main = "#40ABF7"
                dark = "#40ABF7"
                contrastText = "#fff"
            }
            error = @{
                light = "#C9E613"
                main = "#C9E613"
                dark = "#C9E613"
                contrastText = "#fff"
            }
            ".MuiAppBar-colorPrimary" = @{
                "background-color" = "#006AC3"
            }
        }
    }
}

It seems to just ignore the .MuiAppBar class item, but I’ve confirmed via Dev Tools in the browser that’s the name of the class for the background color. I’ve also tried pointing to a CSS file in a published folder and passing that to the Stylesheet param, and it too doesn’t cause any errors but fails to override the Main color.

I trust this is something simple I’ve failed to grasp, would appreciate any insight.

Adam

Product: PowerShell Universal
Version: 2.2.1
2

Ended up using the same code in a CSS stylesheet and it gave me the desired result.

1 Like