List of colors specifically used by New-UDIcon

PowerShell Universal
1

Maybe i have lost my mind, I cannot find any documentation on a list of words for the icon colors get-psucolors would be nice, idk.

  • red
  • green
  • yellow
  • orange

These are obvious, but then these are not

  • grey
  • whoknows

I hope it is documented somewhere and i just cannot find it.

Fun fact, grey doesn’t show up.

2

I’m looking for this as well. I’ve seen mentions of a DashboardColor object and color as a string. I’ve seen ‘standard’, ‘primary’, ‘secondary’, ‘error’, ‘info’, ‘success’, ‘warning’ for the strings. For DashboardColor, I think it is based off of the theme. I found this PowerShell Universal Dashboard - Now with Hundreds of Themes! and this psu-themes/Repository/dashboards/psu-themes at main · potatoqualitee/psu-themes · GitHub.

Usage of DashboardColor vs color as a string seems to be inconsistent, and I haven’t seen a document page that actually defines what the allowed values are.

3

DashboardColor has a parse method that tries to convert the string into the proper color. When you pass a string to a DashboardColor parameter, that value is passed into this.

        public static DashboardColor Parse(string hexOrName)
        {
            if (hexOrName.StartsWith("#"))
            {
                hexOrName = hexOrName.TrimStart('#');

                if (hexOrName.Length == 3)
                {
                    hexOrName += hexOrName;
                }

                if (hexOrName.Length != 3 && hexOrName.Length < 6)
                {
                    while (hexOrName.Length < 6)
                    {
                        hexOrName = "0" + hexOrName;
                    }
                }

                if (hexOrName.Length == 6)
                {
                    hexOrName = "FF" + hexOrName;
                }

                Int32 iColorInt = Convert.ToInt32(hexOrName.Substring(0), 16);

                return new DashboardColor(iColorInt);
            }
            else if ((hexOrName.ToLower()).Equals("transparent"))
            {
                var color = Color.FromArgb(0, 0, 0, 0);

                return new DashboardColor(color);
            }
            else if (hexOrName.StartsWith("rgb"))
            {
                return new DashboardColor(hexOrName);
            }
            else
            {
                var color = Color.FromName(hexOrName);

                return new DashboardColor(color);
            }
        }

So that means you can pass it:

# Hex color 
New-UDIcon -Icon User -Color '#2596be'

# RGB values
New-UDIcon -Icon User -Color 'rgb(37, 150, 190)'

# Anything Color.FromName knows
New-UDIcon -Icon User -Color 'gray'

Known color names are here: KnownColor Enum (System.Drawing)

Fun fact, DashboardColor has a Lighten and Darken method to making colors slightly light or darker than the one you’ve defined by 10%.

$Color = [DashboardColor]'#2596be'
New-UDIcon -Icon User -Color $Color -Size 2x
$Color = $Color.Darken()
New-UDIcon -Icon User -Color $Color -Size 2x
4

So are ‘standard’, ‘primary’, ‘secondary’, ‘error’, ‘info’, ‘success’, and ‘warning’ no longer valid?

5

It’s a bit of a consistency issue. Some components use the MUI standard colors like primary secondary etc while some use the DashboardColor. It will depend on the component and the parameter is state as such.

The DashboardColor class is kind of a historical thing and from our original implementation of Universal Dashboard.

6

After reading this i threw this together. I needed it for myself, so figured i’d share. @akapsch - hope it helps you.

New-UDDashboard -Title "Known Colors" -Content {
    New-UDGrid -Container -Spacing 2 -Content {
        New-UDCard -Content {
            New-UDGrid -Container -Spacing 2 -Children {
                # Get all KnownColor values
                $colors = [System.Drawing.KnownColor].GetEnumValues()
                
                # Create a grid item for each color
                foreach ($color in $colors) {
                    New-UDGrid -Item -Children {
                        New-UDTypography -Text $color.ToString() -Variant "body1" -Style @{
                            textAlign = "center"
                        }
                        New-UDPaper -Elevation 3 -Content {
                        } -Style @{
                            backgroundColor = $color.ToString()
                            width           = "200px"
                            height          = "100px"
                            display         = "flex"
                            alignItems      = "center"
                            justifyContent  = "center"
                            paddingTop      = "0px"
                        }
                    } -RowSpacing 2
                }
            }
        }
    }
}
1 Like
7

Very nice! That would be a good example for the docs, lol.

8

I’ve got a couple of example posts here in the forums (icon search, color palette). @adam is welcome to use them if/how he wishes! I’m hoping to keep adding examples of things to beef up some of the search results. Not saying I’m doing any of this the right/best way, just a “works for me” way :smiley:

1 Like
9

I’ve added this color palette code to my existing reference app that already had icon search and typography examples. Thanks for sharing.