I spent some time replicating the Ant Design theme from the admin console in UD.
$Theme = @{
palette = @{
primary = @{
light = '#69696a'
main = '#1890ff'
dark = '#1e1e1f'
}
secondary = @{
light = '#1890ff'
main = '#1890ff'
dark = '#e62958'
}
warning = @{
main = '#ffc071'
dark = '#ffb25e'
}
error = @{
xLight = '#ffebee'
main = '#f44336'
dark = '#d32f2f'
}
success = @{
xLight = '#e8f5e9'
main = '#4caf50'
dark = '#388e3c'
}
background = @{
default = "#f0f2f5"
}
}
typography = @{
body1 = @{
fontSize = 14
}
h6 = @{
fontSize = 14
fontWeight = 400
}
}
overrides = @{
MuiAppBar = @{
colorPrimary = @{
color = '#000'
backgroundColor = '#fff'
}
}
MuiButton = @{
contained = @{
color = "#fff"
lineHeight = 1.5715
fontWeight = 400
backgroundColor = "#1890ff"
borderColor = "#1890ff"
borderRadius = 0
boxShadow = $null
transition = "all .3s cubic-bezier(.645,.045,.355,1)"
textTransform = 'none'
'&:hover' = @{
backgroundColor = '#40a9ff'
borderColor = '#40a9ff'
color = '#fff'
boxShadow = $null
}
}
}
MuiDrawer = @{
paperAnchorDockedLeft = @{
borderRight = $null
}
}
MuiExpansionPanel = @{
rounded = @{
"&:first-child" = @{
borderTopLeftRadius = 0
borderTopRightRadius = 0
}
"&:last-child" = @{
borderBottomLeftRadius = 0
borderBottomRightRadius = 0
}
}
}
MuiIconButton = @{
root = @{
borderRadius = 0
fontSize = 14
padding = "4px 12px"
}
}
MuiInput = @{
root = @{
lineHeight = 1.5715
}
underline = @{
"&:before" = @{
borderBottom = $null
}
"&:after" = @{
borderBottom = $null
}
"&:hover" = @{
"&:before" = @{
borderBottom = "0 !important"
}
}
}
}
MuiInputBase = @{
input = @{
border = '1px solid #d9d9d9'
borderRadius = '2px'
padding = '4px 11px'
color = "rgba(0,0,0,.85)"
lineHeight = 1.5715
fontSize = 14
"&:hover" = @{
borderColor = "#40a9ff"
}
"&:focus" = @{
borderColor = '#40a9ff'
boxShadow = "0 0 0 2px rgb(24 144 255 / 20%)"
}
}
}
MuiListItem = @{
root = @{
transition = "opacity .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1),color .3s"
cursor = 'pointer'
"&:hover" = @{
color = '#1890ff !important'
}
}
button = @{
"&:hover" = @{
color = '#1890ff'
backgroundColor = "#fff"
}
}
}
MuiListItemIcon = @{
root = @{
minWidth = '25px'
"&:hover" = @{
color = '#1890ff'
}
}
}
MuiListItemText = @{
multiline = @{
marginTop = 0
marginBottom = 0
}
}
MuiPaper = @{
rounded = @{
borderRadius = 0
}
elevation1 = @{
boxShadow = $null
}
elevation4 = @{
boxShadow = $null
}
}
MuiSvgIcon = @{
colorPrimary = @{
color = "#000"
}
}
MuiTab = @{
root = @{
minHeight = 0
textTransform = 'none'
}
labelIcon = @{
minHeight = 0
}
}
}
}
Here’s a demo dashboard that uses it.
$Navigation = @(
New-UDListItem -Label "Home" -Icon (New-UDIcon -Icon User)
New-UDListItem -Label "Getting Started" -Icon (New-UDIcon -Icon User) -Children {
New-UDListItem -Label "Installation" -OnClick { Invoke-UDRedirect '/installation' }
New-UDListItem -Label "Usage" -OnClick { Invoke-UDRedirect '/usage' }
New-UDListItem -Label "FAQs" -OnClick { Invoke-UDRedirect '/faqs' }
New-UDListItem -Label "System Requirements" -OnClick { Invoke-UDRedirect '/requirements' }
New-UDListItem -Label "Purchasing" -OnClick { Invoke-UDRedirect '/purchasing' }
}
)
New-UDDashboard -Theme $Theme -Title 'PowerShell Universal' -Content {
New-UDCard -Content {
New-UDTypography Text
}
New-UDButton -Text 'Hello'
New-UDTextbox -Label 'Hello'
New-UDCheckBox -Label 'Hello'
New-UDSwitch -Checked $true
New-UDUpload -OnUpload {
Show-UDToast $Body
} -Text 'Upload'
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 2" }
New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 3" }
New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content { $Body }
}
New-UDPaper -Elevation 0 -Content {}
New-UDPaper -Elevation 1 -Content {}
New-UDPaper -Elevation 3 -Content {}
New-UDExpansionPanelGroup -Children {
New-UDExpansionPanel -Title "Hello" -Children {}
New-UDExpansionPanel -Title "Hello" -Id 'expContent' -Children {
New-UDElement -Tag 'div' -Content { "Hello" }
}
}
New-UDElement -Tag div -Attributes @{
style = @{
height = '20px'
}
}
New-UDTabs -Tabs {
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
}
New-UDMenu -Text 'Menu' -Content {
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
}
New-UDLink -Text 'Ironman Software' -url https://www.ironmansoftware.com
New-UDTransferList -Item {
New-UDTransferListItem -Name 'test1' -Value 1
New-UDTransferListItem -Name 'test2' -Value 2
New-UDTransferListItem -Name 'test3' -Value 3
New-UDTransferListItem -Name 'test4' -Value 4
New-UDTransferListItem -Name 'test5' -Value 5
}
New-UDChip -Label 'Basic' -Icon (New-UDIcon -Icon 'user')
$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
)
New-UDTable -Data $Data
} -Navigation $Navigation -NavigationLayout Permanent
This is what it looks like.
Currently on the light theme but should be able to work the dark theme. It removes border radiuses, box shadows, changes some colors and hover effects, and reduces the overall size of things.
I’m sure there are things I missed but I will continue to mess with it. I think I will integrate this directly into the product so you can jsut do something like:
New-UDDashboard -Theme "AntDesign"