Vertical UDTab background doesn't change when toggling light/dark mode

PowerShell Universal
1

Hi Everyone,

There’s a new behavior that I’m seeing in v3.7. When I use the -Orientation vertical switch in New-UDTabs the background of the tab doesn’t change when toggling between light & dark mode. If I remove the -Orientation vertical switch, the tab background behaves as expected.

Here’s a sample of the New-UDTabs code block:

    New-UDTabs -Tabs {
        New-UDTab -Text 'Summary' -Content {
            New-UDTypography -Text "hi there"
            New-UDHtml -Markup "<b>something is here</b><hr />"
            New-UDTextbox -FullWidth -Label "tb1" -Value "one stinky dinky ah ah ah"
            New-UDTextbox -FullWidth -Label "tb2" -Value "two stinky dinky ah ah ah"
        }
    } -Orientation vertical

Here’s the vertical tab in light mode:

image
image727×290 16.3 KB

Here’s the vertical tab in dark mode:

image
image729×278 6.34 KB

Here’s the tab without the -Orientation vertical switch in both modes (background changes):

image
image728×318 20.2 KB

image
image726×325 16.6 KB

Am I doing something wrong or did I stumble across a bug? Thanks so much!

Product: PowerShell Universal
Version: 3.7.3
2

You did. I see this too. If you want to roll back to the material design theme, you can set the theme parameter of New-UDDashboard.

New-UDDashboard -Theme (Get-UDTheme -Name 'MateralDesign') #...
3

Thanks, Adam!

I tried using the -Theme (Get-UDTheme -Name 'MateralDesign') switch, but it looks like I hit something else:

Error rendering dashboard
This error is not expected. Please contact Ironman Software support.

Error: Objects are not valid as a React child (found: Error: MUI: The color (primary) provided to augmentColor(color) is invalid. `color.main` should be a string, but `null` was provided instead. Did you intend to use one of the following approaches? import { green } from "@mui/material/colors"; const theme1 = createTheme({ palette: { primary: green, } }); const theme2 = createTheme({ palette: { primary: { main: green[500] }, } });). If you meant to render a collection of children, use an array instead.
4

It’s a typo, -Theme (Get-UDTheme -Name 'MaterialDesign') works