Update Theme viewer to be more accurate to the theme and allow select
Omzig opened this issue · comments
Suggestion:
Also it would be helpful to do something like -Themes @('CLRS', 'coffee_theme') or maybe add an optional -ExcludeThemes @()
function Show-UDThemeColorViewer {
<#
.SYNOPSIS
Shows all the theme colors in a modal.
.DESCRIPTION
Shows all the theme colors in a modal.
#>
[cmdletbinding()]
param([string[]]$Filter = $null)
Show-UDModal -Header {
New-UDStack -Direction row -Children {
New-UDTypography -Variant h3 -Content {
New-UDIcon -Icon Images
" Themes"
}
New-UDHtml -Markup " "
New-UDButton -Text "Set Default - Light" -OnClick {
Set-UDTheme -Theme (Get-UDTheme -Name 'MaterialDesign')
}
New-UDButton -Text "Set Default - Dark" -Color secondary -OnClick {
Set-UDTheme -Theme (Get-UDTheme -Name 'MaterialDesign') -Variant dark
}
}
} -Content {
New-UDDynamic -Content {
New-UDRow -Columns {
$themes = @()
if ($filter) {
$themes += 'MaterialDesign'
$themes += $filter | Sort-Object
}
else {
$themes += 'MaterialDesign'
$themes = Get-UDTheme
$themes = $themes | Where-Object { $_ -ne 'Cobalt Neon' -and $_ -ne 'duckbones' -and $_ -ne 'HaX0R_BLUE' -and $_ -ne 'HaX0R_GR33N' -and $_ -ne 'HaX0R_R3D' -and $_ -ne 'Retro' -and $_ -ne 'VibrantInk' -and $_ -ne 'C64' -and $_ -ne 'QB64 Super Dark Blue' -and $_ -ne 'kanagawabones' -and $_ -ne 'Darkside' -and $_ -ne 'Broadcast' -and $_ -ne 'Atom' -and $_ -ne 'primary' } | Sort-Object
}
$themes | ForEach-Object {
New-UDColumn -SmallSize 4 -Content {
try {
$themeName = $_
$Theme = Get-UDTheme -Name $themeName -ErrorAction SilentlyContinue
New-UDStack -Direction row -Content {
New-UDCard -Title "$_ - Light" -Content {
New-UDButton -Text "Set $_" -OnClick {
Set-UDTheme -Theme $Theme -Variant light
Write-Host ($Theme | ConvertTo-Json -Depth 20)
}
New-UDButton -Text "Set $_" -Color secondary -OnClick {
Set-UDTheme -Theme $Theme -Variant light
Write-Host ($Theme | ConvertTo-Json -Depth 20)
}
New-UDElement -Content {
"Background"
} -Attributes @{
style = @{
color = $Theme.light.palette.text.primary
backgroundColor = $Theme.light.overrides.MuiDrawer.paper.backgroundColor
}
} -Tag 'div'
New-UDElement -Content {
"Primary Button"
} -Attributes @{
style = @{
color = $Theme.light.overrides.MuiButton.contained.color
backgroundColor = $Theme.light.palette.primary.main
}
} -Tag 'div'
New-UDElement -Content {
"Secondary Button"
} -Attributes @{
style = @{
color = $Theme.light.overrides.MuiButton.contained.color
backgroundColor = $Theme.light.palette.secondary.main
}
} -Tag 'div'
}
New-UDCard -Title "$_ - Dark" -Content {
New-UDButton -Text "Set $_" -OnClick {
Set-UDTheme -Theme $Theme -Variant dark
Write-Host ($Theme | ConvertTo-Json -Depth 20)
}
New-UDButton -Text "Set $_" -Color secondary -OnClick {
Set-UDTheme -Theme $Theme -Variant dark
Write-Host ($Theme | ConvertTo-Json -Depth 20)
}
New-UDElement -Content {
"Primary Background"
} -Attributes @{
style = @{
color = $Theme.dark.palette.text.primary
backgroundColor = $Theme.dark.overrides.MuiDrawer.paper.backgroundColor
}
} -Tag 'div'
New-UDElement -Content {
"Primary Button"
} -Attributes @{
style = @{
color = $Theme.dark.overrides.MuiButton.contained.color
backgroundColor = $Theme.dark.palette.primary.main
}
} -Tag 'div'
New-UDElement -Content {
"Secondary Button"
} -Attributes @{
style = @{
color = $Theme.dark.overrides.MuiButton.contained.color
backgroundColor = $Theme.dark.palette.secondary.main
}
} -Tag 'div'
}
}
}
catch {
Write-Host $themeName
Write-Host $_
}
}
}
}
} -LoadingComponent {
New-UDProgress
}
} -FullWidth -MaxWidth xl
}Usage:
-Navigation $Navigation -HeaderContent{
New-UDTooltip -Content {
New-UDIconButton -Icon (New-UDIcon -Icon Gear) -OnClick{
Show-UDThemeColorViewer -filter arcoiris, Breeze, Chalkboard ,Contrast ,Cyberdyne ,Desert ,DoomOne ,Flatland ,Ganyu ,Harper ,Horizon ,IC_Orange_PPL ,'Lab Fox',Laser ,MaterialDarker ,'Monokai Pro' ,potatoqualitee ,Rapture ,Retrowave ,Seti ,Spiderman ,'synthwave-everything' ,'The Hulk' ,'Tomorrow Night Burns' ,Treehouse ,Unikitty ,WildCherry
}
} -TooltipContent {
"Select Theme"
} -Place bottom -Type info
}You will notice that if we target the correct background, some of the themes are useless.