Card Style using dark/light theme

Product: PowerShell Universal
Version: 2.11.1

I’m playing around a bit with themes. On occasion, I have some cards that I want to highlight certain information and so stick out a bit with a different color than the default paper color. Where this can be challenging is that I want to use a different highlight color in my light and dark themes.

Today, I overwrite the card by putting a New-UDStyle block around the card and the following:
-Style “.ud-mu-cardbody { display: block !important; background-color: $Cache:TitleCardColor}”

I’m pulling in the background-color using a cache variable today so I only have to change it in one location. I’d prefer to pull it in with something defined in the theme (perhaps have defined cardhighlight or something named like that in the theme:

background = @{
            default = '#132230'

            paper   = '#5a646e'

            cardbackground = '#AF8C46'

        }

Is it possible to use that in a -Style ? If so, how do I do that?

Thanks!

This is a feature of v3. You can define colors outside of the default palette colors. Then you can use the color by name in the new Sx property.

$Theme = @{
    light = @{
        palette = @{
            primary = @{
                main = "#fff"
                col = "#64748B"
            }
            cool =  @{
                main = 'blue'
            }
        }
    }
    dark  = @{
        palette = @{
            primary = @{
                main = "#333"
            }
            cool =  @{
                main = 'red'
            }
        }
    }
}

New-UDDashboard -Title 'PowerShell Universal' -Content {
    New-UDStyle -Sx @{
        '.MuiCardContent-root' = @{
            backgroundColor = 'cool.main'
        }
        
    } -Content {
        New-UDCard -Text 'Test' 
    }
} -Theme $Theme

Light

image

Dark

image